1. 程式人生 > >vue跨域 axios請求資料

vue跨域 axios請求資料

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    //原型繫結