axios怎麼用

安裝

npm install axios --save

直接使用線上axios

<script src="https://unpkg.com/axios/dist/axios.min.js">

// 在Vue中可以ES6語法這樣寫
import axios from axios
axios.get()

// 如果要全局配置可以在min.js文件中這樣引入
Vue.prototyre.$axios = axios
this.$axios.get()

</script>

說了這麼多，該怎麼使用他呢，來看一個例子

axios.get('https://editor.csdn.net/md?articleId=106891325', {
	params: {
		id: 6
	}
}),
.theh( res => {
	console.log('請求到的數據是:' res )
})
.catch( (err) => {
	console.log('數據獲取失敗')
})

如果是post請求該怎麼寫呢？ post方法的第二個參數爲請求參數對象

axios.post('https://editor.csdn.net/md?articleId=106891325', {
	name: '小夥子'
}),
.theh( function(res) {
	console.log('請求到的數據是:' res )
})
.catch( function(err) {
	console.log('數據獲取失敗')
})

可以發送多個請求嗎，來看下面的操作

可以寫多個請求函數，這裏以兩個爲例，利用axios的.all()方法接收一個由每個請求函數組成的數組，如果全部請求成功，在axios.spread()方法接收一個回調函數，該函數的參數即是每個請求所返回的結果。

function userCount () {
	return axios.get('/user/xxx')
},
function userAccount () {
	return axios.get('/user/xxx/123')
},
this.$axios.all(
	[userCount(), userAccount()]
)
.then(axios.spread(function (res1, res2) {
//當這兩個請求都完成的時候會觸發spread函數，res1、res2代表返回的結果
	console.log(res1);
	console.log(res2)
}))

axios爲所有請求方式都提供了別名

axios.request(config)

axios.get(url, [config])

axios.delete(url, [config])

axios.head(url, [config])

axios.options(url, [config])

axios.post(url, [data], [config])

axios.put(url, [data], [config])

axios.patch(url, [data], [config])

axios該怎麼配置默認值

• 通過axios.defaults配置全局的默認值，對所有的請求都可以生效。

axios.defaults.headers.common['token'] = ''
axios.defaults.headers.post['Content-type'] = 'application/json'
axios.defaults.baseURL = 'https://baike.xx.com'

• 通過自定義實例的默認值，以及修改實例的配置

// 創建時自定義默認配置，超時設置爲全局默認值0秒
let xx = axios.create({
	baseURL: 'www.taobao.com',
	params: {
		name: 'xxx'
	}
})
// 修改配置後，超時設置爲4秒
xx.defaults.timeout: 4000

axios的攔截器

工作原理： 可以分別設置請求攔截和響應攔截，在發出請求和響應到達.then之前進行判斷處理

• 請求攔截器

axios.intercaptors.response.use(
res => {
	if (res) {
		return res
	}
},
err => {
		return Promise.reject(err)
	}
)

• 對於請求攔截器把response換成request。第一個參數是成功時的回調，第二個參數是錯誤時的回調。

取消請求

• 取消請求的話需要先通過創建一個CancelToken.source工廠函數創建一個標識source
• 通過配置項制定標識，這樣才知道取消的是哪個請求
• 調用取消方法

var CancelToken = axios.CancelToken;
//第一步
var source = CancelToken.source(); 
axios.post('/user/xx', {
  name: 'new xx'
}, {
  //第二步
  cancelToken: source.token 
})
//第三步
source.cancel('我的請求被取消了'); 

或者這樣寫：

// 把cancelToken的構造函數傳遞給配置項
// 該構造函數接受一個函數作爲參數，在這個函數中指定標識符。
var CancelToken = axios.CancelToken;
var cancel;
axios.get('/app/xx/get', {
  baseURL: 'http://www.taobao.com',
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  })
});
cancel();

關於請求跨域的配置

在工作中請求服務端數據時難免會出現跨域的問題，那麼可以在配置文件裏設置代理，vue-cli項目，需要在根目錄自己創建一個vue.config.js的文件，在裏面可以這樣進行配置

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        //目標路徑，必須加上http和端口號
        target: 'https://www.xxx.com', 
        //是否跨域
        changeOrigin: true, 
        ws: true,
        pathRewrite: {
        //重寫路徑
          '^/api': '' 
        }
      }
    }
  }
};

調用接口：

axios.post('/api/test', {name: 'haha'});

如果不重寫路徑，訪問的就是http://www.xxx.com/api/test，如果那麼重寫路徑訪問的就是http://www.xxx.com/test

最後來說一下請求跨域的原理

因爲瀏覽器的同源策略的現象，客戶端在請求服務端的數據時會發生跨域問題的，而服務器和服務器之間可以相互請求數據，是沒有跨域的概念（如果服務器沒有設置禁止跨域的權限問題），也就是說，我們可以配置一個代理的服務器可以請求另一個服務器中的數據，然後把請求出來的數據返回到我們的代理服務器中，代理服務器再返回數據給我們的客戶端，這樣我們就可以實現跨域訪問數據了。
另外可以再去了解一下jsonp，iframe是怎麼解決跨域問題的