vue跨域 axios請求資料
阿新 • • 發佈:2019-02-20
1.axios作為vue裡面用來請求資料的方法已經非常強大,底層依然是基於ajax的封裝,我們在使用以前可以對其做一些簡單的處理,方便後期的使用:
為了更好的使用,一般我們是會基於qs模板來做一些處理
import axios from 'axios'
import qs from 'qs'
// 測試地址
const API = {
local:'xxxxxx',
online:'xxxxxxx'
}
//production 為生產環境
if( process.env.NODE_ENV != 'production' ){
axios.defaults.baseURL = API.local;
}else{
axios.defaults.baseURL = API.online;
}
axios.defaults.timeout = 6000;
//http request 攔截器(對傳送的資料做提前處理)
axios.interceptors.request.use(
config => {
config.data = qs.stringify(config.data);
config.headers = {
'Content-Type':'application/x-www-form-urlencoded'
}
return config;
},
err => {
return Promise.reject(err);
}
);
//http response 攔截器(對返回的資料做一些處理)
axios.interceptors.response.use(
response => {
if(response.status == 200){
return response.data;
}
},
error => {
return Promise.reject(error.data)
}
)
2.為了可以全域性使用這樣的處理方法,我們在vue的入口檔案 main.js 裡面直接引入並繫結在vue原型上:
import axios from 'axios'
import '../src/assets/js/ajax.js' //檔案地址
Vue.prototype.$http = axios //原型繫結