在vue中使用axios的步骤（保姆级）

一、基础用法

1.安装axios

npm i axios

2.引入axios

// 引入axios
import axios from 'axios'

3使用

      // 发起一个post请求
axios({
  method: 'post',
  url: 'http://192.168.0.88:8888/api/private/v1/login',
  data: {
    username: 'admin',
    password: '123456'
  }
});

二、进阶用法

根据某些配置项将公共的部分封装起来重复利用

1.准备封装文件

创建一个request.js 的文件用来存放封装的内容

// 引入axios
import axios from "axios";
// 1.准备baseurl
let baseUrl = "";
// 2.创建新的axios实例  service
const service = axios.create({
  baseURL: baseUrl,
  // 超时时间
  timeout: 2000,
  headers: { "X-Custom-Header": "foobar" },
});
//   3.添加请求拦截器
// 请求拦截器
service.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么.
    config.headers.Authorization = localStorage.getItem("cms-token");
    return config;
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);
// 4.添加响应拦截器
// 添加响应拦截器
service.interceptors.response.use(
  (response) => {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    // 手动清除 Toast

    return response.data;
  },
  (error) => {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么

    return Promise.reject(error);
  }
);
// 5.向外抛出实例对象
export default service

2.直接使用

//先引入
import request from '../utils/request'

//使用
request({
        url:'/login',
        data:{
          username: 'admin',
          password: '123456'
        }
      })

3.通过api管理的方式进行使用

3.1 创建api文件夹用来统一管理接口

建议api中的文件对应view中的文件目录

3.2 创建对应的js文件

//先引入
import request from '../utils/request'

// 向外暴露封装的请求结果

export const Login = (data)=>{
    // 以返回值的形式将请求结果返回出去
    return request({
        url:'/login',
          data:{
            username: 'admin',
            password: '123456'
          }
    })

}

注意：get请求的时候要通过params进行传值

export const GetList = (params)=>{
    // 以返回值的形式将请求结果返回出去
    return request({
        url:'/users',
        method:'get',
        params
    })

}

3.3使用方式

在要使用的vue文件中引入api文件夹中对应的js文件,通过结构赋值的方式获取文件中的方法

import { Login } from '../api/user'

// 在对应的方法中使用
  Login()

3.4处理返回值

axios 返回的是Promise格式的数据我们可以通过async / awite 进行数据处理

 async login(){
      // 在对应的方法中使用 谁调用谁传值
     let {data,meta} = await Login({
            username: 'admin',
            password: '123456'
          });
          console.log(data,meta);

    }  

3.5拿到的值就可以赋值给data中

  async login(){
      // 在对应的方法中使用 谁调用谁传值
     let {data,meta} = await Login({
            username: 'admin',
            password: '123456'
          });
          // 将获取到的值传递给data中
          this.token = data.token
    }

配置代理

devServer: {
    host: 'localhost',//本地地址
    port: '8080',//端口号
    hot: true,//热更新自动刷新
    open: true,//自动打开
    overlay: {  //当出现编译错误或警告时，在浏览器中显示全屏覆盖。只显示错误信息不提示警告情况限制是
      warning: false,
      error: true
    },
    proxy: {
      "/api": {
        target: 'http://192.168.0.88:8888/api/private/v1',//代理地址 凡是使用/api
        changeOrigin: true,//允许跨域请求
        secure: false,
        pathRewrite: { //重写路径 替换请求地址中的指定路径
          ['^/api']: '/' //将请求地址中的api替换为空
        }
      }
    }
  }