简单易懂axios使用方法,规范API管理

第一步下载axios

npm install axios --save

第二步创建路由管理文件

import axios from "axios";
//学生
const renew =axios.create({
    baseURL:'http://localhost:8081/SSM_war/api/vi/admin',
    async:false
})
//拦截器
renew.interceptors.request.use(config=>{
    let token = localStorage.getItem('token');
    if(token){
        config.headers={
            'aa-token':token
        }
    }

    // 发送请求之前可以在这里写一些东西
    return config;
},err=>{
    // 请求错误
    return Promise.reject(err)
});

renew.interceptors.response.use(res=> {
    //响应数据
    return res;
},err=>{
    //响应数据
    console.log(err.response)
    let status=err.response.status
    switch (status){
        case 500:
            err.Message="重复输入";
    }
    return Promise.reject(err)
});

export default renew

baseURL是管理请求路径，一个项目的请求路径肯定不是单一的。 在请求拦截器中，通过 localStorage.getItem() 方法获取了本地存储的 token 值，并将其添加到请求头部中，以便在之后的请求中携带该 token 值。在响应拦截器中，则处理了响应数据，比如根据响应状态码判断请求成功或失败等，最终返回响应数据或错误信息。

创建API统一管理文件

我这个项目就创建了四个路径文件由api.js统一管理

export const Jurisdiction = (params) => admin.post('/Jurisdiction', params)

这段代码的作用是定义了一个名为 Jurisdiction 的函数，该函数接受一个参数 params，并通过 admin.post() 方法来向服务器发送一个 POST 请求。

在这段代码中，export const 是 ES6 中定义模块的语法。它表示将该函数定义为一个与模块紧密相关的导出变量。而 Jurisdiction 则是该函数的名称，在其他代码文件中可以通过 import 语句引入该函数并使用。

admin.post() 则是发送 POST 请求的方法，它可能是你自己封装的一个 axios 实例，也可能是在其他地方定义的。该方法接受两个参数，第一个参数是请求的 URL 地址，第二个参数则是请求的数据。在这个例子中，admin.post('/Jurisdiction', params) 表示向 '/Jurisdiction' 地址发送一个 POST 请求，并将 params 作为请求体数据发送到服务器。

因此，这段代码的作用是封装一个向 '/Jurisdiction' 地址发送 POST 请求的函数，并将 params 作为请求体数据传给服务器。 基本使用方法： 这里的（params）是请求参数 admin是请求文件中的baseURL会自动拼接如：

baseURL:'http://localhost:8081/SSM_war/api/vi/admin'+'/Jurisdiction',
等于
'http://localhost:8081/SSM_war/api/vi/admin/Jurisdiction'

POST请求方法可以根据需求切换其他的请求方法

更具页面需求引用

先引入需要的api

import { loginregister, adminlogin } from '../axios/api'

导入参数获取返回值

loginregister({
			//这里为参数
          "user": this.user,
          "password": this.password,
          "Organization_name": this.Campus_name,
          "RegistrationTime": times
        }).then(res => {
        //res为返回值
          if (res.data.errorCode == -4) {
            alert(res.data.errorMsg)
          } else {
            alert("注册" + res.data.errorMsg)
          }
        })

在ts语法中也是一样的