请求

1、axios

axios是一个基于promise的网络请求库，可以用于浏览器和node.js。

官网地址：https://www.axios-http.cn/。具体使用可以登录官网看文档，简单使用如下。

其他使用文档的地址：http://www.axios-js.com/zh-cn/docs/#axios-create-config，感觉这个在用例上更加详细。

首先需要下载安装axios或者使用使用在线的cdn，官方文档有详细操作

下载好后，如果我们需要使用要引入（项目中是import这个实例，单页开发js导入下载的包）。使用起来也非常简单，还支持自定义axios实例。直接在实例后面.get或.post发送请求，里面第一个参数对象是请求的url地址，第二个参数对象是请求携带参数，get和post携带参数的写法不用具体看下面示例。.then拿到返回结果并执行其他操作，也可以直接赋值给其他变量拿到返回结果。可以用.catch拿到错误信息。具体详细使用看官方文档，下面写一个简单示例。

import axios from 'axios'
const res = axios.post('url地址',{
    'username':'张三',
    'password':'123456'
})
const res = axios.get('url地址',{
    params:{
        'username':'张三',
        'password':'123456'
    }
})

可以自定义一个请求：在请求创建的时候往里面放一些基础参数，如基础地址、超时时间等；可以设置请求拦截器，在里面可以放一些配置，如给请求头加一些参数，请求拦截器的第一个参数位置是设置一些配置，第二个参数位置是捕获请求异常并处理；可以设置响应拦截器，和请求拦截器类似，参数第一位处理响应的信息，第二位捕获异常并处理。请求错误是客户端到服务器的错误，如请求找不到服务器，响应错误是服务器到客户端错误，如200、300、400、500错误。

自定义请求实例如下，这个实例涉及的用法还是挺全的。里面有按需导出，和默认导出并不冲突。使用element-plus的插件提示错误信息，需要注意的是全局设置了element-plus按需导入的插件仅对.vue文件生效，.js文件还是需要导入的。

import axios from 'axios'
import { useUserStore } from '@/stores/user.js'
import { ElMessage } from 'element-plus'
import router from '@/router'
const baseURL = 'http://big-event-vue-api-t.itheima.net'

const instance = axios.create({
  // TODO 1. 基础地址，超时时间
  baseURL,
  timeout: 10000
})

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // TODO 2. 携带token
    const useStore = useUserStore()
    if (useStore.token) {
      config.headers.Authorization = useStore.token
    }
    return config
  },
  (err) => Promise.reject(err)
)

// 响应拦截器
instance.interceptors.response.use(
  (res) => {
    // TODO 4. 摘取核心响应数据
    if (res.data.code === 0) {
      return res
    }
    // TODO 3. 处理业务失败
    // 处理业务失败, 给错误提示，抛出错误
    ElMessage.error(res.data.message || '服务异常')
    return Promise.reject(res.data)
  },
  (err) => {
    // TODO 5. 处理401错误
    // 错误的特殊情况 => 401 权限不足 或 token 过期 => 拦截到登录
    if (err.response?.status === 401) {
      router.push('/login')
    }

    // 错误的默认情况 => 只要给提示
    ElMessage.error(err.response.data.message || '服务异常')
    return Promise.reject(err)
  }
)

export default instance
export { baseURL }

对定义好的请求使用起来也是非常方便，导入，然后使用就行了。也可以将请求再封装一层，封装成函数调用。下面演示一下直接使用

import request from '@/utils/request.js'
const res = await request.get('/my/userinfo')