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    //原型绑定

猜你喜欢

转载自blog.csdn.net/Amy_cloud/article/details/79764184