axios的使用

lieeps 發(fā)布于2019-08-22 16:23 / 3055人閱讀

摘要：但是如果你想以的方式傳參，則需要做一點改變參考這里注意如果你的請求方法是，又規(guī)定了參數(shù)格式是，則必須要使用下面這些方法中的一種。

axios是vue官方推薦的http庫，詳情見官方中文文檔。

安裝：

npm install axios

安裝依賴：

npm install --save axios vue-axios

配置模板：

//main.js中
import Vue from "vue"
import axios from "axios"
import VueAxios from "vue-axios"
 
Vue.use(VueAxios, axios)
//然后你就能愉快地使用axios啦

如果不想這樣安裝，也可以快速引用它：

如何使用：

有好幾種方法，get post delete put patch 什么的，不過我通常就用get和post兩種，所以我就記錄這種中的使用方法了。

let data = {   //要傳的參數(shù)
    "loginName":"123456",
    "passWord":"123456",
    "updateSign":"52af3ce8a82f62707789fe00899ed3f0",
    "isLogin":"1"
}


//post請求

this.axios.post("/api/user/sickUserLogin/3",data)
    .then((response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });
 
    
//get請求

this.axios.get("/api/user/sickUserLogin/3",{params:data})
    .then((response) => {
        console.log(response.data);
        console.log(response);   
    })
    .catch(function (error) {
        console.log(error);
    });

這里要注意一點的是：get和post請求的傳參方式是不一樣的，原因可以參考這里

axios.get("url", {params: data});
axios.post("url", data);

//get請求的參數(shù)是拼接url字符串傳遞的；
//post請求的參數(shù)是通過data請求主體傳遞的；

參數(shù)格式：

axios的默認(rèn)參數(shù)格式是json字符串，傳參方式就像上面那個demo一樣即可。但是如果你想以key：value的方式傳參，則需要做一點改變：參考這里
注意：如果你的請求方法是post，又規(guī)定了參數(shù)格式是application/x-www-form-urlencoded，則必須要使用下面這些方法中的一種。（我在寫demo的時候測試了一下，post方法下json傳參格式是失敗的，必須要改成鍵值對的格式，否則會報錯）
主要推薦這種寫法：

var qs = require("qs");
axios.post("/foo", qs.stringify({ "bar": 123 }));

這個方法需要先安裝一下qs：

npm install qs

import qs from "qs"

Vue.prototype.qs = qs;  //全局定義，使用的時候用this.qs.stringify(data)即可

還有另一種寫法淺顯易懂：

var params = new URLSearchParams();    //這種寫法不需要引入qs
params.append("collectId","16");       //你要傳給后臺的參數(shù)值 key/value
params.append("collectTye","2");
params.append("isCancel","2",);


this.$axios({
    method: "post",
    url:url,
    data: params 
}).then((res)=>{

})

設(shè)置axios的baseURL：

//在main.js中：
axios.defaults.baseURL = "http://api.eeesys.com:18087/";
//這些具體的寫法可以多看幾遍文檔，就懂了，我也不是很懂
//根據(jù)我的測驗，這樣寫了之后，請求會忽略掉proxyTable中的配置，直接請求這個地址，這樣在生產(chǎn)環(huán)境下就可以跨域了，不知道是不是這樣的

重新定義一個axios實例：

const $axios = axios.create({
    baseURL: "http://api.eeesys.com:18087/",
    timeout: 5000,
    headers: {
        "Content-Type": "application/x-www-form-urlencoded"
    }
});

// 初始化默認(rèn)post header,這里規(guī)定了post請求的傳參格式是application/x-www-form-urlencoded
//如果不這樣寫，后臺接收到的參數(shù)是null
$axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
Vue.prototype.$axios = $axios;

這樣就可以在代碼中使用自己定義的axios實例，沒有配置的屬性會繼承l(wèi)ib/defaults.js文件中的設(shè)置