vue2.0+vue-router2.0+axios+webpack开发webapp项目（三）

vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios，在项目中将vue-resource更新为axios，发现这的确是个不错的HTTP 客户端。它尽可能简化封装了 HTTP 相关的各种操作，在 Web App 中使用非常方便。

要用到axios当然要先安装了安装命令如下（当然你如果通过script引入也是可以的）

//安装方法
npm install axios

//引入axios
import axios from 'axios';

//添加到Vue全局中
Vue.prototype.$http = axios;

axios提供了以下几种请求方式

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

这里的config是对请求的基本信息配置，例如请求头等等。这里我们可以减少很多额外的处理代码也更优美，直接使用。

//config
import Qs from 'qs'
{
  //请求的接口，在请求的时候，如axios.get(url,config);这里的url会覆盖掉config中的url
  url: '/user',

  // 请求方法同上
  method: 'get', // default
  // 基础url前缀
  baseURL: 'https://some-domain.com/api/',
　　
　　　　
  transformRequest: [function (data) {
    // 这里可以在发送请求之前对请求数据做处理，比如form-data格式化等，这里可以使用开头引入的Qs（这个模块在安装axios的时候就已经安装了，不需要另外安装）
　　data = Qs.stringify({});
    return data;
  }],

  transformResponse: [function (data) {
    // 这里提前处理返回的数据

    return data;
  }],

  // 请求头信息
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  //parameter参数
  params: {
    ID: 12345
  },

  //post参数，使用axios.post(url,{},config);如果没有额外的也必须要用一个空对象，否则会报错
  data: {
    firstName: 'Fred'
  },

  //设置超时时间
  timeout: 1000,
  //返回数据类型
  responseType: 'json', // default


}

同时axios给我们提供了发起多个请求时的处理方法(axios请求返回的也是一个promise,跟踪错误只需要在最后加一个catch就可以了。)

this.$http.all([
    this.$http.get(this.allport.goodDetails, {
        params: {
            goodsId: this.goodsId
        }
    }),
    this.$http.get(this.allport.recommend, {
        params: {
            id: this.goodsId
        }
    })
])
.then(this.$http.spread((goodRes, recommendRes) => {
    console.log(goodRes);
    console.log(recommendRes);
}))
.catch((error) => {
    console.log(error);
});

当然你也可以设置全局的

axios.defaults.baseURL = 'https://xxxx';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

//当然还可以这么配置
var instance = axios.create({
  baseURL: 'https://api.example.com'
});

以及axios拦截器结合vuex设置请求头

axios.interceptors.request.use(function (config) {
        let basicstr = store.state.accessToken;
        config.headers.Authorization = `Bearer ${basicstr}`;
        return config;
}, function (error) {
    return Promise.reject(error);
});

当然使用axios 的post请求时他的请求头中的Content-Type属性为application/json;charset=UTF-8。这就导致了我们传递的参数数据格式是不正确的，后台拿不到正确的参数。（如图）

有人要问了那么改个Content-Type不就行了，但是很遗憾不行，这个貌似是axios的一个bug，有人提过issue，但是依旧没有解决，网上广搜资料后找到了解决方案，使用URLSearchParams来处理参数，但是URLSearchParams的兼容性并不高，所以使用的时候还是要多加注意，如下示例

let param = new URLSearchParams();
param.append('username', userName);
this.$http.post(_this.allport.userLogin, param)
.then(function (response) {
    response = response.data;
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

以上就是axios在项目中的使用。