Vue.js axios

1.1.安裝與引入

(1)在HTML文件中引入

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

(2)在腳手架中使用
安裝axios

npm install axios -S

引入（哪一個組件使用它就要在哪一個組件中引入進來）

import axios from 'axios'

2.GET 方法

語法：axios.get(url,config)

methods:{
    getMsg(){
        //拼接url傳遞參數
       var url = this.baseUrl + '?q=vue&sort=stars'
       axios.get(url).then(function(res){
            console.log(res)
        })
    },
    getMsg2(){
        //使用params傳遞參數
        var data = {q:'vue',sort:"stars"}
        axios.get(this.baseUrl,{params:data}).then(function(res){
            console.log(res)
        })
    },
}

3.POST 方法

語法：axios.post(url,data,config)

postMsg(){
    var data = {q:'vue',sort:"stars"}
    axios.post(this.baseUrl2,data).then(function(res){
        console.log(res)
    })
},

4.請求配置項

url:是用於請求的服務器 URL
method:建立請求時使用的方法,默認是 get
baseURL:它能夠經過設置一個 baseURL 便於爲 axios 實例的方法傳遞相對 URL
headers:對象類型，是即將被髮送的自定義請求頭
params:即將與請求一塊兒發送的 URL 參數
data:做爲請求主體被髮送的數據，適用於post方法
timeout:指定請求超時的毫秒數
responseType:表示服務器響應的數據類型。默認json

在請求頭添加token

<script>
import axios from 'axios'

export default {
    data(){
        return{
            baseUrl:"https://api.github.com/search/repositories",
            baseUrl2:"api/process_post",
        }
    },
    mounted(){
        window.localStorage.setItem("token","abcdefghijk")
    },
    methods:{
        getMsg(){
            //拼接url傳遞參數
            var url = this.baseUrl + '?q=vue&sort=stars'
            //將token添加到請求頭中
            axios.get(url,{headers:{"Authorization":window.localStorage.getItem("token")}}).then(function(res){
                console.log(res)
            })
        },
        getMsg2(){
            //使用params傳遞參數
            var data = {q:'vue',sort:"stars"}
            //將token添加到請求頭中
            axios.get(this.baseUrl,{params:data,headers:{"Authorization":window.localStorage.getItem("token")}}).then(function(res){
                console.log(res)
            })
        },
        postMsg(){
            var data = {q:'vue',sort:"stars"}
            //將token添加到請求頭中
            axios.post(this.baseUrl2,data,{headers:{"Authorization":window.localStorage.getItem("token")}}).then(function(res){
                console.log(res)
            })
        },
    }
}
</script>

5.響應結構

axios請求的響應包含如下信息：
data: 由服務器提供的響應
status: HTTP 狀態碼 例如200,
statusText:來自服務器響應的 HTTP 狀態信息 例如 "OK",
headers: 服務器響應的頭,
config: 是爲請求提供的配置信息

6.配置的默認值

你能夠指定將被用在各個請求的配置默認值。
全局的 axios 默認值：

//入口文件
import Vue from 'vue'
import axios from 'axios'

axios.defaults.baseURL = 'https://api.example.com';
//添加token
axios.defaults.headers.common['Authorization'] = window.localStorage.getItem("token");
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

7.攔截器

在請求或響應被 then 或 catch 處理前攔截它們。

//入口文件
import Vue from 'vue'
import axios from 'axios'

axios.interceptors.request.use(function (config) {
    // 在發送請求以前作些什麼
    config.headers.common['Authorization'] = window.localStorage.getItem("token")
    return config;
  }, function (error) {
    // 對請求錯誤作些什麼
    return Promise.reject(error);
  });

// 添加響應攔截器
axios.interceptors.response.use(function (response) {
    // 對響應數據作點什麼
    return response;
  }, function (error) {
    // 對響應錯誤作點什麼
    return Promise.reject(error);
  });