本文已参与「新人创作礼」活动．一起开启掘金创作之路。
最近也开发了自己的公众号，会在上面分享前端方面的知识，有兴趣的话，走个关注吧！！！
axios二次封装和请求发送
我使用的例子是登录注册发请求的例子
1.axios二次封装
import axios from 'axios' //导入axios
//创建axios对象
const request = axios.create({
baseURL: 'http://toutiao.itheima.net' //接口基准路径
})
// 请求拦截器 1，可以在这里添加token
request.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
const { user} = store.state
if (user && user.token) {
config.headers.Authorization = `Bearer ${store.state.user.token}`
}
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
request.interceptors.response.use(function (response) {
// // 2xx 范围内的状态码都会触发该函数。
// // 对响应数据做点什么
return response;
}, function (error) {
// // 超出 2xx 范围的状态码都会触发该函数。
// // 对响应错误做点什么
return Promise.reject(error);
});
//最后导出request
export default request
2.创建api文件夹，用来管理请求，在这里我们就可以创建 ./src/api/user.js用来管理登录页面的请求
// 用户登录请求模块 user.js
import request from "@/utils/request"; //导入axios实例对象，待会会使用这个对象去发请求
//axios是在原地返回得到promise对象,then（）/catch()拿到成功或者失败的内容,这两个是promise原生带的方法
export const login = (data) => { //data是参数，里面传入登录信息
return request({
method: 'post', //请求方法，get post
url: '/v1_0/authorizations',
data
})
}
3.在组件中，调用发请求，我采用的是Async/Await 调用，这种比较优雅的调用方式（强烈推荐）
//表单提交事件触发onSubmit（）
methods: {
// 验证表单函数
async onSubmit(values) {
// 获取表单验证
const user = this.user;
try {
const res = await login(user) //在这里我们调用刚才在user.js中封装的login请求，会在原地得到promise对象,
//使用res来接收我们请求回来的信息
// 存储token
this.$store.commit('setUser', res.data.data)
// 为了数据刷新还在，采用本地存储，然后store重本地存储里面获取
// 根据请求响应结果处理后续操作
this.$toast.success('登录成功') //执行到这个地方的时候，会把前面的窗口关闭
this.$router.back()
} catch (error) {
//在这里处理错误信息
}
}
接口调用： async/await 处理异步操作
async/await 是ES7 引入的新语法，可以更加方便的进行异步操作
async作为一个关键字放到函数前面- 任何一个 async 函数都会隐式返回一个 promise**
await` 关键字只能在使用 `async 定义的函数中使用
- await后面可以直接跟一个 Promise实例对象
- await函数不能单独使用
具体的async/await可以前往MDN详细了解
最后向各位掘友求个关注点赞
