axios的介紹及使用

 

特色：支持promise API 、 攔截請求和響應、轉換請求數據和響應數據、取消請求、自動轉換JSON數據、客戶端支持防護XSRF等；

axios請求方法（需後端定義）：get獲取數據、 post提交數據（用於表單提交和文件上傳）、 patch更新（只將修改的數據推送到後端）、 put更新（全部數據都推送到後端）、 delete刪除數據

例如：axios_test.vue:

<script>
  export default{
  name:'axios_test',
  components:{},
  created(){
      //get
      axios.get('/data.json',{params:{id:12,name:'zs'}}).then((res)=>{
          console.log(res);
      })
  或：axios({
          method:'get',
          url:'/data.json',
          params:{
              id:12,
              name:'zs'
          }
      }).then((res)=>{
          console.log(res);
      })
      //post
      axios.post('/xxx').then({
           // 默認application/json經常使用，用於沒有上傳文件時，用法同上不詳寫了
           // form-data 表單提交（用於文件上傳）
          let data = { id:12}   
          let formData = new FormData()
          for(let key in data){
              formData.append(key,data[key]);
          }
          axios.post('post',formData).then(res=>{
              console.log(res)
          })
      })
      //put/patch
      axios.put('/put',data).then(res=>{
          console.log(res);
      })
      //delete
      axios.delete('/delete',{ params:{id:12}}).then(res=>{})    //實則底層調用get請求,params數據將添加到url中去；
      axios.delete('/delete',{ data:{id:12}}).then(res=>{})    //實則底層調用post請求，data數據將放在請求體中；
      //併發請求：同時進行多個請求，並統一處理返回值。  axios.all()和axios.spread()
      axios.all([
          axios.get('/data.json'),
          axios.get('/city.json')
      ]).then(
          axios.spread((dataRes,cityRes)=>{
              console.log(dataRes,cityRes);
          })
      )

      //建立axios實例
      let instance = axios.create({  //設置後會覆蓋之前的設置
          baseURL:'http://localhost:8080',
          timeout:1000,
          url:'/data.json',
          method：'get/post/put/patch/delete',
          headers：{token:''},  //設置請求頭
          params:{}, //請求參數拼接到url上
          data:{}  //請求參數放到請求體中
      })
      let instance2 = axios.create() 
      instance.get('/data.json').then(res=>{})
      //一、axios全局配置
        axios.defaults.timeout = 1000;
        axios.defaults.baseURL = 'http://localhost:8080'
      //二、axios實例配置（經常使用方式）
        let instance = axios.create()    //單首創建防止全局污染
        instance.defaults.timeout=3000  //單獨設置防止覆蓋其餘設置
      //三、axios請求配置 (三種方式中優先級最高)
        instance.get('/data.json',{
           time:5000
        })

      //攔截器：在請求或響應被處理前攔截它們，分爲請求攔截器和響應攔截器
        //請求攔截器
        axios.interceptors.request.use(config=>{
            //在發送請求前作些什麼
            return config
          },err=>{
            //在請求發生錯誤時怎麼處理
            return Promise.reject(err)
        })
        //響應攔截器
        axios.interceptors.response.use(config=>{
            //請求成功對響應數據作處理
            return res
          },err=>{
            //在響應發生錯誤時怎麼處理
            return Promise.reject(err)
        })
        //取消攔截器（瞭解）
        let interceptor = axios.interceptors.request.use(config=>{
            config.headers={ auto:true}
            return config
        })
        axios.interceptors.request.eject(interceptor);
        //攔截器例子1:好比微博評論時須要先登陸
        let instance = axios.create({})
        instance.interceptors.request.use(config=>{
            config.headers.token = '';
            return config
        })
        //攔截器例子2：移動端開發時的請求等待
        let instance_phone = axios.create({})
        instance_phone.interceptors.request.use(config=>{
            $('#modal').show()  // 請求等待彈窗
            return config
        })
        instance_phone.interceptors.response.use(res=>{
            $('#modal').hide()  // 請求等待彈窗隱藏
            return res
        })
      //錯誤處理  實際開發中，通常添加統一錯誤處理，特殊的單獨添加。
        //添加請求錯誤處理攔截器
        let instance = axios.create({})
        instance.interceptors.request(config=>{
            return config
        },err=>{
          //請求錯誤 通常http狀態碼以4開頭，常見：401超時，404 沒找到
          $('#modal').show()
          setTimeout(()=>{
              $('#modal').hide()
          },2000)
            return Promise.reject(err)
        })
        //添加響應錯誤處理攔截器
        instance.interceptors.response(res=>{
            return res
        },err=>{
          //響應錯誤 通常http狀態碼以5開頭，常見：500系統錯誤，502系統重啓
          $('#modal').show()
          setTimeout(()=>{
              $('#modal').hide()
          },2000)
            return Promise.reject(err)
        })
        //添加特殊錯誤處理
        instance.get('/data.json').then(res=>{
            console.log(res)
        }).catch(err=>{
            console.log(err)
        })          
      //取消請求（瞭解）
        let source = axios.CancelToken.source()
        axios.get('data.json',{cancelToken:source.token}).then()
        source.cancel('cancel http')  //取消請求（message可選）
        好比當用戶查詢數據耗時過久，用戶再也不查詢進行了其餘操做時可能用到，通常用不到。
        
      }
    }
</script>

 

axios實戰：移動端UI的vant使用和axios的封裝：

①npm i vant
②npm i ts-import-plugin -D
③按照 API文檔的快速上手提示，在 babel.config.js 中配置

    module.exports = {
        plugins: [
            ['import', {
               libraryName: 'vant',
               libraryDirectory: 'es',
               style: true
           }, 'vant']
        ]
    };

 

④ 引入 Vant 組件

test.vue:

<template>
   <van-button type="default">默認按鈕</van-button> 
</template>
<script>
   import axios from 'axios'
   import {Button} from 'vant'
   export default {
     name:'showlist',
     components:{
       [Button.name]=Button   //局部註冊，template模板中沒有引用時可不寫，vant官方格式。
     },
     created(){
       axios.get(./data.json).then((res)=>{
           console.log(res)
       })
     }
   }
</script>

 

⑤ router.js中添加一條路由：{path:'/showlist',name:'',component:()=>import('./views/showlist.vue')}
⑥ npm run serve 啓動服務測試

axios的封裝 示例

①contactApi.js:

const CONTACT_API = {
 //獲取聯繫人列表
 getContactList:{
   method:'get',
   url:'/contactList'
 },
 //新建聯繫人 form-data
 newContactForm:{
   method:'post',
   url:'/contact/new/form-data'
 },
 //新建聯繫人 application/json
 newContactJson:{
   method:'post',
   url:'/contact/new/json'
 },
 //編輯聯繫人
 editContact:{
   method:'put',
   url:'/contact/edit'
 },
 //刪除聯繫人
 delContact:{
   method:'delete',
   url:'/contact'
 },
}
export default CONTACT_API 

②http.js:

import axios from 'axios'
import service from './contactApi.js'
import {Toast} from 'vant'
//service循環遍歷，輸出不一樣的請求方法
let instance = axios.create({
   baseURL:'http://localhost:9000/api',
   timeout:1000
})
const Http = {}; //存放請求方法的容器
for(let key in service){
   let api = service[key];  //url、method
   Http[key] = async function(
       params, //請求參數 
       isFormData = false, //標識是不是form-data請求
       config={} //配置參數
   ){                        
       let newParams = {}
       if(params && isFormData){
           newParams = new FormData()
           for(let i in params){
               newParams.append(i,params([i]))
           }
       }else{
           newParams = params
       }
       //不一樣請求的判斷
       let response = {}; //請求的返回值
       if(api.method ==='put'|| api.method ==='post'||api.method==='patch'){
           try{ response = await instance[api.method](api.url,newParams,config)
           }catch(err){
               response = err
           }
       }else if(api.method ==='delete'||api.method==='get'){
           config.params = newParams
           try{ 
               response = await instance
               [api.method](api.url,config)
           }catch(err){
               response = err
           }
       }
       return response;
     }
 }
 //攔截器的添加
 instance.interceptors.request.use(config=>{
   Toast.loading({
     mask:false, //是否有陰影
     duration:0,  //一直存在
     forbidClick:true,  //禁止點擊
     message:'加載中...'
   })
   return config
  },err=>{
   Toast.clear()
   Toast('請求錯誤，請稍後重試')
 })
 //響應攔截器
 instance.interceptors.response.use(res=>{
    Toast.clear()
    return res.data
 },()=>{
    Toast.clear()
    Toast('請求錯誤，請稍後重試')
 })
 export default Http

③main.js文件中引入http.js,並將其掛載到vue實例上，引入後添加以下：
 Vue.prototype.$http = Http;
④vue組件中使用:
<script>
   import axios from 'axios'
   import {Button} from 'vant'
   export default {
     name:'showlist',
     components:{
       [Button.name]=Button   //局部註冊，template模板中沒有引用時可不寫。
     },
     methods:{
       //獲取聯繫人列表
       async getList(){
         let res = await this.$http.getContact()
         this.list = res.data
       }
     }
     
   }
</script>