在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。
他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御CSRF等。
axios文档：https://www.npmjs.com/package/axios


安装

npm install axios

引入
通常我们会在src中，新建一个http文件夹，里边新建index.js和api.js文件，index.js文件用来封装我们的axios，api.js用来统一管理我们的接口

我们需要在index.js中做如下操作：
- 首先需要引入axios
import axios from "axios";
// 设置默认请求地址
axios.defaults.baseURL = 'http://127.0.0.1:8000/'
// 设置请求超时时限
axios.defaults.timeout = 10000
- 请求拦截
我们在发送请求前可以进行一个请求的拦截，为什么要拦截呢，我们拦截请求是用来做什么的呢？
比如，有些请求是需要用户登录之后才能访问的，或者post请求的时候，我们需要序列化我们提交的数据。
这时候，我们可以在请求被发送之前进行一个拦截，从而进行我们想要的操作。
// 请求拦截器 当请求被发送之前进行我们想要的操作
axios.interceptors.request.use(config => {
  // 从localStorage中获取token
  let token = localStorage.getItem('token');
  // 如果有token, 就把token设置到请求头中Authorization字段中
  if (token) {
    axios.defaults.headers['Authorization'] = token
  }
  // token && (config.headers.Authorization = token);
  return config;
}, error => {
  return Promise.reject(error);
});
- 响应拦截
响应拦截器很好理解，就是服务器返回给我们的数据，我们在拿到之前可以对他进行一些处理。
例如下面的思想：如果后台返回的状态码是200，则正常返回数据，否则的根据错误的状态码类型进行一些我们需要的错误，
其实这里主要就是进行了错误的统一处理和没登录或登录过期后调整登录页的一个操作。
// 响应拦截器（当后端返回数据的时候进行拦截）
axios.interceptors.response.use(response => {
  // 当响应码是 2xx 的情况, 进入这里
  // debugger
  return response.data;
}, error => {
  console.log(error.response)
  // 当响应码不是 2xx 的情况, 进入这里
  // debugger
  return error
});
根据上面封装好的axios对象，封装 get、post、put、delete请求
封装get方法,对应get请求
export function get(url, params, headers) {
      return new Promise((resolve, reject) => {
        axios.get(url, {params, headers}).then(res => {
          resolve(res)
        }).catch(err => {
          reject(err)
        })
      })
     }
封装post方法,对应post请求
export function post(url, params) {
       return new Promise((resolve, reject) => {
         axios.post(url, params).then((res) => {
           resolve(res)
         }).catch((err) => {
           // debugger
           reject(err)
         })
       })
     }
封装put方法,对应put请求
export function put(url, params, headers) {
      return new Promise((resolve, reject) => {
        axios.put(url, params, headers).then((res) => {
          resolve(res)
        }).catch((err) => {
          // debugger
          reject(err)
        })
      })
    }

封装delete方法,对应delete请求
export function del(url, params, headers) {
      return new Promise((resolve, reject) => {
        axios.delete(url, {data: params, headers}).then((res) => {
          resolve(res)
        }).catch((err) => {
          // debugger
          reject(err)
        })
      })
    }

到这里axios的封装基本就完成了，下面还有api的统一管理
首先在api.js里面导入我们封装的方法
import {get, post, put, del} from './index'
现在比如我们要注册一个账号，是post请求,我们可以再api中这样封装
export const signUp = parameter => {
  // 注册
  return post(
    // baseURL后拼接的路由 
    'signup/',
    // post携带的data数据
    parameter
  )
}

然后我们可以在页面中这样调用我们的api接口

function signUp(){
      let params = {
        "email": this.signup_email,
        "username": this.signup_username,
        "phone": this.signup_phone,
        'password': this.signup_password,
      }
      signUp(params).then(res => {
        if (res.code == 10004) {
          this.signup_errors = res.msg  //10004注册失败
          console.log(this.signup_errors.email[0])
        }
        if (res.code == 10001) {
          this.signup_errors = ''  //初始化错误信息
          this.message = res.msg  //10001注册成功
        }
      }).catch(error => {
        console.log(error)
      })
    }
其他的api接口，就在api.js中继续往下面扩展就可以了,但是一定要注意写好注释