步骤一:安装axios库
// 安装 axios 库
npm install axios
步骤二:新建一个 JS 文件用来配置 Axios 的数据。
// 引入安装的 Axios
import axios from 'axios'
// 创建 axios 实例对象
const instance = axios.create({
//作为请求接口的跟路径 后面instance发送请求的时候 会自动拼装上baseURL
baseURL: 'http://localhost:8080/elemrg',
});
// 添加请求拦截器 后台验证不同的请求是否携带token 来判断是否返回什么数据
instance.interceptors.request.use((config) => {
// 在发送请求之前做些什么?获取本地存储的token
let mytoken = localStorage.getItem('token')
//放到Headers请求头里面 作为请求头参数传递
if (mytoken) { config.headers.token = mytoken }
return config;
}, (error) => {
// 对请求错误做些什么
return Promise.reject(error);
});
//默认导出 一个js文件里面只能导出一个对象
export default instance
步骤三:项目中需要用到的请求方法进行封装。
// 引入已经封装好的axios方法
import instance from "../utils/request";
//1.注册接口的请求方法封装
export function register (data) {
return instance({
method: 'post', //请求方式
url: '/admin/register', //已经添加了baseURL,所以这里只需要添加注册的register的路径
data //根据属性名和属性值一致 可以简写
})
}
//2.登录接口
export function login (data) {
return instance({
method: 'post',
url: '/admin/login',
data
})
}
步骤四:对应页面直接引入使用即可
//引入api
import {register,login} from '@/api/admin.js'
methods:{
// 在项目中需要用到引用该方法的地方直接调用该方法
async showLogin(){
let data = {} // 如果该请求需要传递参数,将参数放在
const {data:res} = await login(data) // 调用封装好的请求方法
}
}