文檔： https://www.kancloud.cn/yunye/axios/234845
官網(wǎng)： https://www.axios.com/
gitHub: https://github.com/axios/axios
axios
axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端
它本身具有以下特征：
- 從瀏覽器中創(chuàng)建 XMLHttpRequest
- 從 node.js 發(fā)出 http 請求
- 支持 Promise API
- 攔截請求和響應
- 轉換請求和響應數(shù)據(jù)
- 取消請求
- 自動轉換JSON數(shù)據(jù)
- 客戶端支持防止 CSRF/XSRF
安裝
安裝其他插件的時候，可以直接在 main.js 中引入并 Vue.use()缀磕，但是 axios 并不能 use橙凳，只能每個需要發(fā)送請求的組件中即時引入
為了解決這個問題遇革，有兩種開發(fā)思路闹丐，一是在引入 axios 之后烘嘱，修改原型鏈鹦付，二是結合 Vuex尚粘，封裝一個 aciton
使用npm
npm install axios
使用cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
解決post方法使用application/x-www-form-urlencoded格式編碼數(shù)據(jù)
- 設置 headers:{ 'Content-type': 'application/x-www-form-urlencoded'}
axios.post('url',data,{headers:{ 'Content-type': 'application/x-www-form-urlencoded'}})
// 不想在每次請求都設置的話，可以集中設置下
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
- 僅僅這樣并沒有達到想要的效果敲长，post的body主體中還是{"age":10}這樣的格
式郎嫁，并不是我們想要的query參數(shù)互捌。引入Qs，這個庫是axios里面包含的行剂，不需要再下載了import qs from 'qs' var data = qs.stringify({"name":"xie"}); axios.post('url',data).then()
axios默認是不讓ajax請求頭部攜帶cookie的
axios 解決跨域cookie丟失問題
設置 axios.defaults.withCredentials = true 即可
示例代碼：
axios.defaults.withCredentials = true;
var param = new URLSearchParams();
param.append("vCode",vcode);
axios.post('http://localhost',param)
.then(function(res) {
var rs=res.data;
console.log(rs.data);
})
.catch(function(err) {
console.log(err);
});
配合vue
Vue 原本有一個官方推薦的 ajax 插件 vue-resource秕噪，但是自從 Vue 更新到 2.0 之后，官方就不再更新 vue-resource
目前主流的 Vue 項目厚宰，都選擇 axios 來完成 ajax 請求
之前一直使用的是 vue-resource插件腌巾，在主入口文件引入import VueResource from 'vue-resource'之后，直接使用Vue.use(VueResource)之后即可將該插件全局引用了铲觉；
初用axios時澈蝙，無腦的按照上面的步驟進行全局引用，結果當時是慘慘的撵幽。
看了看文檔灯荧，Axios 是一個基于 promise 的 HTTP 庫
axios并沒有install 方法，所以是不能使用vue.use()方法的盐杂。
那么難道每個文件都要來引用一次逗载？解決方法有很多種：
1.結合 vue-axios使用
- axios 改寫為 Vue 的原型屬性
3.結合 Vuex的action
結合 vue-axios使用
vue-axios
用于將axios集成到Vuejs的小包裝器
github: https://github.com/axios/axios
安裝： npm install --save axios vue-axios
vue-axios是按照vue插件的方式去寫的。那么結合vue-axios链烈，就可以去使用vue.use方法了
首先在主入口文件main.js中引用
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios);
之后就可以使用了厉斟，在組件文件中的methods里去使用了
getNewsList(){
this.axios.get('api/getNewsList').then((response)=>{
this.newsList=response.data.data;
}).catch((response)=>{
console.log(response);
})
},
方法2： axios 改寫為 Vue 的原型屬性
首先在主入口文件main.js中引用，之后掛在vue的原型鏈上
import axios from 'axios'
Vue.prototype.$axios= axios
在組件中使用
this.$axios.get('api/getNewsList').then((response)=>{
this.newsList=response.data.data;
}).catch((response)=>{
console.log(response);
})
方法3：結合vuex
在vuex在封裝一層
封裝 axios
import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
// 創(chuàng)建axios實例
const service = axios.create({
baseURL: process.env.BASE_API, // api的base_url
timeout: 5000 // 請求超時時間
})
// request攔截器
service.interceptors.request.use(config => {
// Do something before request is sent
if (store.getters.token) {
config.headers['X-Token'] = getToken() // 讓每個請求攜帶token--['X-Token']為自定義key 請根據(jù)實際情況自行修改
}
return config
}, error => {
// Do something with request error
console.log(error) // for debug
Promise.reject(error)
})
// respone攔截器
service.interceptors.response.use(
response => response,
/**
* 下面的注釋為通過response自定義code來標示請求狀態(tài)强衡，當code返回如下情況為權限有問題擦秽，登出并返回到登錄頁
* 如通過xmlhttprequest 狀態(tài)碼標識 邏輯可寫在下面error中
*/
// const res = response.data;
// if (res.code !== 20000) {
// Message({
// message: res.message,
// type: 'error',
// duration: 5 * 1000
// });
// // 50008:非法的token; 50012:其他客戶端登錄了; 50014:Token 過期了;
// if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
// MessageBox.confirm('你已被登出，可以取消繼續(xù)留在該頁面漩勤，或者重新登錄', '確定登出', {
// confirmButtonText: '重新登錄',
// cancelButtonText: '取消',
// type: 'warning'
// }).then(() => {
// store.dispatch('FedLogOut').then(() => {
// location.reload();// 為了重新實例化vue-router對象 避免bug
// });
// })
// }
// return Promise.reject('error');
// } else {
// return response.data;
// }
error => {
console.log('err' + error)// for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
})
export default service
import request from '@/utils/request'
//使用
export function getInfo(params) {
return request({
url: '/user/info',
method: 'get',
params
});
}
