vue 網絡請求 axios

1. 作用：類似於jQuery的$.ajax作為網絡請求的封裝組件
2. 使用流程

• • 安裝 npm install vue-axios --save

在main.js 中使用 

import axios from 'axios'

 

             vue.prototype.$ajax= axios

• • 說明：

1. 1. 默認是get請求
   2. 有跨域請求
   3. 返回值是Promise對象
   • 直接使用

this.$http({ method: 'get', url: 'https://api.coindesk.com/v1/bpi/currentprice.json', data: { name: 'virus' } })

1. 封裝

• 1. 原因：第三方框架一旦出現停止維護  項目更改網絡請求方式變得很繁瑣 
  2. 流程

                      1)新建require.js對axios進行封裝

import axios from 'axios'

export function requst (config){
       const Axios=axios.create({//實例化
                baseURL:config.url，
               timeout:3000

       })
     return Axios(config)//返回值是Promise對象

}

2) 在組件里面引用   import {requst} from './require.js'

                       3) requst({url:''}).then(result=>{}).catch(err=>{})

3 多個網絡請求

     requst([fun1,fun2]).then(result=>{}).catch(err=>{});

•  fun1 返回的是promise的對象
• result 是個數組  可用const [s1,s2]=result; 或者用axios.spread((res1,res2)=>{})

4  全局配置

• axios.defaults.baseURL='https://1239999';
• axios.defauts.timeout=6000//ms

5  攔截器：攔截每一次你的請求和響應，然后進行相應的處理。

如：一些網站過了一定的時間不進行操作，就會退出登錄讓你重新登陸頁面，當然這不用攔截器你或許也可以完成這功能，但是會很麻煩而且代碼會產生大量重復，所以我們需要用到攔截器。

• 作用

1. 方便調試
2. 登錄檢測未有token 可以先去登錄處理
3. config中的請求信息不符合要求
4. 請求時可以出現一個loading圖片

• 一共有4種  請求2種，應答2種

1. axios.interceptors.requst.use(config=>{console.log(config);return config;//必須返回 不然沒有請求參數了},err=>{conosole.log(err})
2. axios.interceptors.reponse.use(result=>{console.log(result);return result;//必須返回 不然得不到沒有應答了},err=>{conosole.log(err})