axios的封装和api接口的统一管理
-
为什么使用axios封装和api接口的统一管理?
*主要目的就是在帮助我们简化代码和利于后期的更新维护命令:
npm install axios -S; // 安装axios复制代码
-
新建目录:
在src目录中新建http文件夹–>建立service.js文件
-
除了使用npm安装外,我们还可以使用yarn安装
yarn add axios -S
-s表示安装在生产环境(dependencies)中,生产环境的安装,开发环境也可以使用 -
在main.js中全局引入 import axios from ‘axios’
import Vue from 'vue'
import App from './App'
import router from './router' // 导入路由文件
import store from './store' // 导入vuex文件
import axios from './http/service' // 导入a接口
Vue.prototype.$axios= axios; // 把axios挂载到Vue的原型上,这样的话项目中任何一个组件都可以使用了
- 在service.js文件中进行具体的封装
axios本身是单例模式
import axios from 'axios'
import {baseUrl} from '@/config/index.js'
import {Toast} from "vant" //引入vant组件
// 设置axios的基地址
// 接口地址有相同的部分,我们要把相同的部分提取出设置一下,后面调用接口就不需要写相同的部分
//创建service实例,
const service = axios.create({
baseURL: baseUrl, //基地址
timeout: 5000, // request timeout 超时时间
})
//service.defaults.baseURL=baseUrl
// 添加请求拦截器----(设置请求头,传递token)
service.interceptors.request.use(function (config) {
// 在发送请求之前做些什么 //请求数据时能够看到加载效果
//1.请求loading开启动画
Toast.loading({
duration:5000,
forbidClick: true
})
//2.设置token--->使用vuex 在没有配置vuex的情况下我们可以使用本地存储
config.headers ['Authorization'] =vuex
**本地存储是不具备响应功能的,改变数据,页面并不会立即更新**
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器---处理共性的错误统一做处理
service.interceptors.response.use(function (response) {
// 对响应数据做点什么
Toast.clear()
return response.data;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
// 导出
export default service;
- 在http中新建一个requset_ul.js文件进行封装不同的接口,封装的目的便于后期数据更改后直接对接口进行更改,避免花费大量的时间寻找组件进行更改,提高了工作效率。
//封装所有路径 便于后面的维护
module.exports={
smsCode:"/smsCode", //短信验证
login:"/login", //登录
banner:"/banner",//首页轮播图
}
- 在http文件夹中新建api.js文件
//先引入axios和封装好的路径
import service from "./service";
import request_ur from "./request_ur";
//封装请求方法 arg 表示参数
//获取验证码
export function smsCode(arg){
return service({
url:request_ur.smsCode,//对应的
data:arg, //参数
method:"post" //请求的方式
})
}
- 组件中的使用 **.vue
用封装好的路径,能够减少代码.
<script>
//先引入封装好的路径
import { smsCode} from "@/http/api";
methods:{
async getCode(){
let res =await smsCode({ mobile: 手机号码, sms_type: "login" }).then(res => {
console.log(res, "获取验证码");
}
}
</script>