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    //原型绑定
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值