axios在vue中的应用（一）—— 简单调用

目录

1. 安装并引入axios

1.1 使用 npm/cnpm 安装

1.2 在main.js文件中引入axios

2. 使用axios请求本地json文件

3. 将传递的json数据转为FormData

3.1 引入qs

3.2 添加请求拦截器，将axios参数转化为FormData形式

4. 设置请求头

---

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

1. 安装并引入axios

1.1 使用 npm/cnpm 安装

npm install axios --save-dev

1.2 在main.js文件中引入axios

import axios from 'axios'

// 目前在其它的组件中是无法使用axios的，可以在main.js文件中进行配置：
Vue.prototype.$http= axios

// 这样配置以后，就可以在函数中直接用this.$http代替axios，如：
this.$http.post(url, {xx:xxx}).then()

2. 使用axios请求本地json文件

使用axios请求本地文件的时候需要注意以下两点：

（1）本地的json文件必须放置在static/静态文件夹下；

（2）请求的时候需要使用get方法，而不是post；使用post的话会报404错误。

  methods: {
    getRechargeList() {
      let that = this;
      this.$http.get('/static/data/getRecharge.json')
      .then(function (res) {
        console.log(res.data)  // res.data 即为所请求到的数据
      })
      .catch(function (err) {
        console.log(err);
      });

    }
  },

3. 将传递的json数据转为FormData

        利用axios 的post请求传递数据时：axios.post(url, {xx:xxx}).then()，会发现参数错误，用谷歌调试工具调试发现我们传的值变成了一个对象，而不是我们平常的参数传递形式。想要通过axios发送键值对，其实是需要做响应处理的，将传入的数据格式转化为FormData形式的键值对。

3.1 引入qs

qs是一个npm仓库所管理的包，可以用于URL形式和对象/数组等形式之间的转换。

npm install --save axios vue-axios qs

# 只引入qs
npm install qs

使用示例：

// qs.stringify(obj)将对象解析成URL的形式；
let obj = {
    user: "xmj",
    id: "85",
    token: "123456789"
}
qs.stringify(obj);

// qs.parse(url)将URL解析成对象的形式；
let url = 'user=xmj&id=85&token=123456789';
Qs.parse(url);

3.2 添加请求拦截器，将axios参数转化为FormData形式

//main.js 文件

import axios from 'axios'
import qs from 'qs'

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    if(config.method!='get'){
        config.data=qs.stringify(config.data);
    }
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
    return config;
},function (error) {
    return Promise.reject(error)
})
 
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据进行处理
    // ...

    return response;
}, function (error) {
    // 对响应错误进行处理
    // ...

    return Promise.reject(error);
});

4. 设置请求头

        有些时候，我们通过token判断登录状态，需要在每次请求的时候将token带上，需要设置请求头，方法和上面配置Content-Type方法相同。

//main.js
import axios from 'axios'
import qs from 'qs'
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    if(config.method!='get'){
        config.data=qs.stringify(config.data);
    }
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
    let token = window.sessionStorage.getItem("TOKEN");
    if(token) {
        config.headers.common['checkinfo'] = token;
    }
    return config;
},function (error) {
    return Promise.reject(error)
})
 
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据进行处理
    // ...

    return response;
}, function (error) {
    // 超时，重新登录
    if(error.response&&error.response.data.errcode==500){
         ElementUI.Message({
             type:'warning',
             message:"身份过期，请重新登录",
             onClose:function(){
                 sessionStorage.removeItem('TOKEN')
                 router.push('/login')
            }
        });
    }
    return Promise.reject(error);
});