Vue2.0中axios的简单使用！！！

首选我们要进去我们的axios官网，在首页会有一个安装 axios 的口令，我们可以在项目里使用集成终端的方式安装下 axios 附上图片

安装完成之后我们在 src 文件夹里创建两个新的文件夹，一个是接口的文件夹，我这里命名使用的是 api ，另个文件夹是用来自定义配置新建一个 axios 实例和在请求或响应被 then 或 catch 处理前拦截的这些东西，我这里用的是 utils （存放工具类函数）

首先，我们在 utils 里写入一个js文件 request.js ，用来调用里面封装好的函数

首先在 request.js 文件里我们要先引入 axios ,然后新建一个 axios 实例，命名不冲突即可。并且把请求时需要拦截的函数放进去

import axios from 'axios';

// 自定义配置新建一个 ajax 实例
const ajax = axios.create({
    baseURL: 'http://vueshop.glbuys.com/api/', // baseURL 我们自己使用的接口的公共部分，也就是基础地址
    timeout: 10000, // timeout  指定请求超时的毫秒数(0 表示无超时时间)
});

// 添加请求拦截器
ajax.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    config.params={...config.params,token:'1ec949a15fb709370f'} // 我的接口需要添加一个token才能进行验证
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
ajax.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

  export default ajax; // 默认抛出这个实例
  

以上的代码我们都可以在官网直接复制，可以让很多小伙伴省去很多麻烦( 网页搜索快捷键是 ctrl + F )

然后是进行实例的抛出，这个上面的代码里我都有写，也都有注释，可以参考一下，再紧接着就是 api 文件夹里面新建一个 index.js （选取文件夹的里的文件时会默认选中index.js）。 默认情况下，axios将JavaScript对象序列化为JSON，我们可以使用qs库编码数据

import ajax from '../utils/request'; // 引入 request.js 文件里抛出的实例 ajax
import qs from 'qs'; // 使用qs库编码数据

// 抛出实例化过后的请求
export const login =(data)=>{
    return ajax(
        {
            method: 'POST',  // 请求方式
            data:qs.stringify(data), // 数据的转换
            url:'home/user/pwdlogin', // 接口的后半部分
        }
    )
};

这里也是可以复制的，注意修改成自己熟悉的格式

在需要进行接口调用的页面引入抛出的实例

import {login} from '@/api'

在你需要进行数据验证的事件里进行验证（我这里是个登录接口，我们需要把它放在点击事件里）

methods: {
    // 登录点击事件
    onSubmit(){
        let data={
            cellphone:this.username, // 账号
            password:this.password // 密码
        }
        login(data).then(res=>console.log(res.data)) // 调用抛出的实例方法即可
    }

},