什么是axios？

• 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端 简单的理解就是ajax的封装
• 在使用Vue.js框架开发前端项目时 会经常发送ajax请求服务端接口 在开发过程中 需要对axios进一步封装 方便在项目中的使用

axios的特性

• 从浏览器中创建 XMLHttpRequest
• 从 node.js 发出 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防止 CSRF/XSRF

axios的安装

npm install axios -S

一般我们会在项目根目录的src文件夹下新建一个utils文件夹,
在文件夹下放request.js文件,在request.js中首先导入axios，
然后设置属性，比如baseURL（公共地址）和 timeOut (超时时间）
还可以设置响应拦截和请求拦截，在请求拦截中可以设置loading动画的开启和配置请求头的token
在响应拦截中可以关闭loading和根据后端返回的状态码检测token是否有效
最后把server导出

import axios from 'axios'

//创建一个axios
let server = axios.create({
	// 请求公共地址
    baseURL: "http://xxxxxxxxx/api",
    // 超时时间
    timeout: 5000,
})

// 添加请求拦截器
axios.interceptors.request.use((config)=>{
    // 在发送请求之前做些什么
    // 比如判断是否有token
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

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

export default server

 在根目录创建api文件夹统一接口管理,在创建JS文件(api.js)

//引入
import server from "./request.js"; //路劲自己修改

export const login = (params) => {
    return server({
        url: "接口路径",
        method: "post" ,   //后端给什么写什么
        data: params
    })
}

在页面中就可以直接导入使用

import {login} from '@/api/api'  //引入页面

//调用接口
login(){
    let data = {
        userName:"admin",
        passWord:123456
    } 
    login(data).then(res =>{})
}

也可以使用 async 与 await 语法糖

import {login} from '@/api/api'  //引入页面

//调用接口
async login(){
    let data = {
        userName:"admin",
        passWord:123456
    } 
    let res = await login(data)
}