vue项目axios封装
1.将axios封装为一个单独文件
步骤:
- a. 在 utils文件夹中(没有就在src里面创建一个文件夹)创建一个文件: http.js
- b. 在文件中:
- 导入 axios
- 给 axios 设置基准地址
- 给 axios 设置拦截器
- 暴露axios实例**- 代码:
- // 导入 axios
import axios from "axios";
// 创建一个新的axios对象
let instance = axios.create({
//给axios设置基地址
baseURL: "url基地址"
})
**// 设置请求拦截器 官网GitHub搜索 axios**
instance.interceptors.request.use(function (config) {
//可以写你需要拦截的代码逻辑
return config;
}, function (error) {
return Promise.reject(error);
});
// 响应拦截器
instance.interceptors.response.use(function (response) {
//dosomething
return response;
}, function (error) {
return Promise.reject(error);
});
// 暴露 axios 实例
export default instance
-c. 谁请求,谁导入
2. 将网站请求单独封装到一个文件中
将请求统一管理,方便维护,当然也可以分类的管理,看你项目维护怎么方便就怎么写
步骤:
- a. 在 util文件夹中创建一个文件:api.js
- b. 在文件中
- 导入自己封装的 axios
- 封装一个用来登录的方法
- 将方法暴露出去
- 代码:
// 优化2.将网站请求单独封装到一个文件中
//导入封装好的axios
import http from '../utils/http.js';
// 封装登录方法
function apiLogin({ mobile,code}){ //最好把需要传的参数写具体了,看了明白
return http({
url:"/authorizations",
method: "post",
data: {
mobile,
code
}
});
}
// 按需导出
export { apiLogin }
c. 在外界导入这个方法(如login.vue文件中)
import { apiLogin } from "../../api/api.js";
d. 请求
// 例如login.vue文件中
// 发送请求到服务器
apiLogin({
//写需要的参数
mobile:this.mobile,
code: this.code
})
.then(res => {
//成功回调
console.log(res);
// 跳转到首页
this.$router.push("/home");
})
.catch(error => {
console.log("出错啦");
});
3.将请求使用async&await来进行改造
回调函数使用的太过频繁,尤其是异步请求中,async & awiat 目标就是用来解决异步请求中回调函数
如果让异步请求使用 async & await 来修饰的话,那么 异步请求 可以以同步方式书写代码
-使用方法:
async :用来修饰异步函数所在的函数
await:用来修饰异步函数
将异步代码返回的结果以同步的方式进行接收
步骤:
- a. 使用 async 修饰 login 方法
- b. 使用 await 修饰 apiLogin 请求
- c. 用 res 来接收方法的返回值
- d. 用 try 将所有代码包裹起来
- e. 用 catch 处理报错信息
- async login() {
if (!this.checkout()) {
return;
}
/*
在js中有一种错误处理机制 try-catch
将可能报错的代码放到try 中
将出错的处理逻辑放到catch中
*/
try {
// 发送请求到服务器, 提交数据
let res = await apiLogin(this.user);
this.$router.push("/home");
} catch (error) {
console.log("出错了");
}
},