axios二次封装，结合后端请求接口

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

目录

文章目录

前言

一、axios是什么？

二、使用步骤

1.下载axios

2.新建文件夹：引入axios

3.新建文件夹：将实际接口写入在新的文件夹中，统一处理

4.页面中使用接口

---

文章目录

• 前言
• 一、axios是什么？
• 二、使用步骤
  • 1
  • 2.读入数据
• 总结

---

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、axios是什么？

示例：axios 是基于Promise的异步ajax请求库，可以发送 get、post请求，负责与后端交互

二、使用步骤

1.下载axios

代码如下（示例）：

npm i axios

2.新建文件夹：引入axios

代码如下（新建一个axios.js文件夹）：

import axios from "axios";

 先把两种请求方式写出来

//两种请求方式：post  get
export const postRequest = (http, url, params, type) => {
  return axios({
    method: "post",
    url: `${http}${url}`,
    data: params,
    responseType: type,
    headers: {
      token: localStorage.getItem("token")
    }
  });
};
export const getRequest = (http, url, params) => {
  return axios({
    method: "get",
    url: `${http}${url}` + params,
    headers: {
      token: localStorage.getItem("token")
    }
  });
};

  请求拦截与响应（根据后端接口来添加的判断内容）

import { Toast } from "vant";
axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
//响应拦截
axios.interceptors.response.use(response => {

  if (response.data.code == 60052 || response.data.code == 60051) {
    //这里填入想要存储本地的数据例如以下两个，再根据返回的状态码来具体写
    //这里是根据实际项目来的
    localStorage.setItem("userId", "");
    localStorage.setItem("role", "");

    if (response.data.msg) {
      Toast(response.data.msg);
    } else if (response.data.message) {
      Toast(response.data.message);
    } else {
      Toast("登录失效");
    }
  } else if (response.data.code == 10000) {
    if (response.data.msg) {
      Toast(response.data.msg);
    } else if (response.data.message) {
      Toast(response.data.message);
    } else {
      Toast("连接超时");
    }
  } else if (response.data.code == 60053) {
    Toast("系统异常");
    // 系统出错
  } else if (response.data.code == 501) {
    Toast("系统异常");
  } else {
    return response;
  }
  return response;
});

3.新建文件夹：将实际接口写入在新的文件夹中，统一处理

代码如下：（新建的文件夹axios_params.js）

//导入封装的post get请求
import { postRequest, getRequest} from "./axios";

var myUrl='实际项目的url'

//导出接口
export const myOne = params =>{
    return postRequest(myUrl,'接口',params)
}
export const myTwo = params =>{
    return getRequest(myUrl,'接口',params)
}

4.页面中使用接口

代码入下

//使用myOne的接口，就在页面中导入该接口

import {myOne} from '../axios_params.js;

//具体请求时候
//例如方法getNum()

getNum(){
let data =''
    myOne(data).then(res=>{
        
    console.log(res)
      })
},

 记录一下，怕忘记，哪里不对，还有更好的方法，请评论留言！~~~~拜拜