[https://www.cnblogs.com/jpwz/p/12942538.html](https://www.cnblogs.com/jpwz/p/12942538.html) ## 1、基本用法 安裝 ~~~shell cnpm i axios --save ~~~ 在`main.js`中引入`axios` ~~~javascript import axios from 'axios' Vue.prototype.$axios = axios ~~~ 在組件中使用`axios` ~~~vue <script> export default { mounted(){ this.$axios.get('/goods.json').then(res=>{ console.log(res.data); }) } } </script> ~~~ ## 2、axios請求方法 axios可以請求的方法： * get：獲取數據，請求指定的信息，返回實體對象 * post：向指定資源提交數據（例如表單提交或文件上傳） * put：更新數據，從客戶端向服務器傳送的數據取代指定的文檔的內容 * patch：更新數據，是對put方法的補充，用來對已知資源進行局部更新 * delete：請求服務器刪除指定的數據 ### 2.1、get請求 示例代碼 ~~~javascript //方法一，請求格式類似于 http://localhost:8080/goods.json?id=1 this.$axios.get('/goods.json', { params: { id:1 } }).then(res=>{ console.log(res.data); },err=>{ console.log(err); }) //方法二 this.$axios({ method: 'get', url: '/goods.json', params: { id:1 } }).then(res=>{ console.log(res.data); },err=>{ console.log(err); }) ~~~ ### 2.2、post請求 post請求一般分為兩種類型 * form-data 表單提交，圖片上傳、文件上傳時用該類型比較多 * application/json 一般是用于 ajax 異步請求 示例代碼 ~~~javascript //方法一 this.$axios.post('/url',{ id:1 }).then(res=>{ console.log(res.data); },err=>{ console.log(err); }) //方法二 $axios({ method: 'post', url: '/url', data: { id:1 } }).then(res=>{ console.log(res.data); },err=>{ console.log(err); }) //form-data請求 let data = { //請求參數 } let formdata = new FormData(); for(let key in data){ formdata.append(key,data[key]); } this.$axios.post('/goods.json',formdata).then(res=>{ console.log(res.data); },err=>{ console.log(err); }) ~~~ ### 2.3、put和patch請求 示例代碼 ~~~javascript //put請求 this.$axios.put('/url',{ id:1 }).then(res=>{ console.log(res.data); }) //patch請求 this.$axios.put('/url',{ id:1 }).then(res=>{ console.log(res.data); }) ~~~ ### 2.4、delete請求 示例代碼 ~~~javascript //參數以明文形式提交 this.$axios.delete('/url',{ params: { id:1 } }).then(res=>{ console.log(res.data); }) //參數以封裝對象的形式提交 this.$axios.delete('/url',{ data: { id:1 } }).then(res=>{ console.log(res.data); }) //方法二 axios({ method: 'delete', url: '/url', params: { id:1 }, //以明文方式提交參數 data: { id:1 } //以封裝對象方式提交參數 }).then(res=>{ console.log(res.data); }) ~~~ ## 3、并發請求 并發請求：同時進行多個請求，并統一處理返回值 示例代碼 ~~~javascript this.$axios.all([ this.$axios.get('/goods.json'), this.$axios.get('/classify.json') ]).then( this.$axios.spread((goodsRes,classifyRes)=>{ console.log(goodsRes.data); console.log(classifyRes.data); }) ) ~~~ ## 4、axios實例 ### 4.1、創建axios實例 示例代碼 ~~~javascript let instance = this.$axios.create({ baseURL: 'http://localhost:9090', timeout: 2000 }) instance.get('/goods.json').then(res=>{ console.log(res.data); }) ~~~ 可以同時創建多個axios實例。 axios實例常用配置： * baseURL 請求的域名，基本地址，類型：String * timeout 請求超時時長，單位ms，類型：Number * url 請求路徑，類型：String * method 請求方法，類型：String * headers 設置請求頭，類型：Object * params 請求參數，將參數拼接在URL上，類型：Object * data 請求參數，將參數放到請求體中，類型：Object ### 4.2、axios全局配置 示例代碼 ~~~javascript //配置全局的超時時長 this.$axios.defaults.timeout = 2000; //配置全局的基本URL this.$axios.defaults.baseURL = 'http://localhost:8080'; ~~~ ### 4.3、axios實例配置 示例代碼 ~~~javascript let instance = this.$axios.create(); instance.defaults.timeout = 3000; ~~~ ### 4.4、axios請求配置 示例代碼 ~~~javascript this.$axios.get('/goods.json',{ timeout: 3000 }).then() ~~~ 以上配置的優先級為：`請求配置 > 實例配置 > 全局配置` ## 5、攔截器 攔截器：在請求或響應被處理前攔截它們 ### 5.1、請求攔截器 示例代碼 ~~~javascript this.$axios.interceptors.request.use(config=>{ // 發生請求前的處理 return config },err=>{ // 請求錯誤處理 return Promise.reject(err); }) //或者用axios實例創建攔截器 let instance = $axios.create(); instance.interceptors.request.use(config=>{ return config }) ~~~ ### 5.2、響應攔截器 示例代碼 ~~~javascript this.$axios.interceptors.response.use(res=>{ //請求成功對響應數據做處理 return res //該返回對象會傳到請求方法的響應對象中 },err=>{ // 響應錯誤處理 return Promise.reject(err); }) ~~~ ### 5.3、取消攔截 示例代碼 ~~~javascript let instance = this.$axios.interceptors.request.use(config=>{ config.headers = { token: '' } return config }) //取消攔截 this.$axios.interceptors.request.eject(instance); ~~~ ## 6、錯誤處理 示例代碼 ~~~javascript this.$axios.get('/url').then(res={ }).catch(err=>{ //請求攔截器和響應攔截器拋出錯誤時，返回的err對象會傳給當前函數的err對象 console.log(err); }) ~~~ ## 7、取消請求 主要用于取消正在進行的http請求。 示例代碼 ~~~javascript let source = this.$axios.CancelToken.source(); this.$axios.get('/goods.json',{ cancelToken: source }).then(res=>{ console.log(res) }).catch(err=>{ //取消請求后會執行該方法 console.log(err) }) //取消請求，參數可選，該參數信息會發送到請求的catch中 source.cancel('取消后的信息'); ~~~