VUE项目中axios的封装

需求 :  在项目中如果将axios请求全都放在vue组件中会造成代码冗余而且不利于复用,就需要对axios请求代码进行封装

步骤 :  一次封装在request.js文件中设置基地址 ;  二次封装是在对应功能模块的js文件中封装该模块所需的所有axios请求

具体实现

一次封装 :  在src目录下新建utils/request.js文件

1. 导入axios模块
2. 用axios自带的create方法创建一个新的axios实例并将基地址赋值到baseURL上(baseURL是固定的键名不能写错,区分大小写)
3. 用request接收新的实例并使用export default默认导出
4. 当项目中需求多个基地址时,可以将其他基地址的实例按需导出,在需要时用{request2}导入

import axios from 'axios'

const request = axios.create({
  baseURL: 'http://toutiao-app.itheima.net'
})
export const request2 = axios.create({
  baseURL: 'http://api-toutiao-web.itheima.net'
})

export default request

 

二次封装 :  在src目录下新建api/xxx.js文件

1. 导入request.js模块
2. 定义一个方法(最好使用语义化方法名)并将request请求体作为函数的返回值,如果请求需要参数在请求体中使用函数的形参,调用函数时传递值
3. 用按需导出的方法将函数导出(因为一个模块可能有多个请求,所以最好使用按需导出)
4. 在对应的vue模块中导入并使用,使用时调用定义的函数就能得到返回的axios请求体

import request from '@/utils/request.js'

export const getChannels = () => {
  return request({
    url: 'v1_0/user/channels'
  })
}

import { getChannels } from '@/api/channels.js'

async btn () {
      try {
        const res = await getChannels()
        console.log('请求成功!', res)
      } catch (err) {
        console.log('错误信息:', err)
      }
}

总结

1.async与await使用

   async后面的函数会返回一个promise对象, 可以用then方法添加回调函数

   

   await会暂停当前 async function 的执行，等待await后面的异步函数处理完成(异步函数同步执行)

   执行顺序

    （1）await 指令会暂停原异步函数的执行，并等待右侧Promise返回结果(pending)

    （2）若 Promise 正常处理(Resolved，又称Fulfilled)，其回调resolve函数的参数作为 await 表达式的值，继续执行 async function

    （3）若 Promise 处理异常(Rejected)，await 表达式会把 Promise 的异常原因抛出

2.try..catch..使用

   执行顺序

    （1）程序会先执行try代码块内部的代码,若正常则不执行catch

    （2）若代码出错,则会从出错位置中止代码执行,然后执行catch的代码

    （3）继续执行try...catch...后面的代码

3.按需导出与默认导出

   按需导出(export)可以有多个,  导出时需要加大{}

   默认导出(export default)只能有一个,导出时不用加{}

4.函数调用与返回值

   函数调用时如果有return会在函数调用位置返回return后面的内容,如果没有return会返回undefined