axios二次封装和请求发送

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 引入的新语法，可以更加方便的进行异步操作

1. async 作为一个关键字放到函数前面
2. 任何一个 async 函数都会隐式返回一个 promise**

await` 关键字只能在使用 `async 定义的函数中使用

1. await后面可以直接跟一个 Promise实例对象
2. await函数不能单独使用

具体的async/await可以前往MDN详细了解

最后向各位掘友求个关注点赞