六、Vue3网络[axios]

一、基础使用

配置：

import { createApp } from 'vue'
import axios from 'axios'
import App from './App.vue'
import store from './store.js'
const app = createApp(App)

app.config.globalProperties.$http = axios
app.mount('#app')

使用：this.$http({})
写法一：

axios({
method: 'get',
url: 'http://127.0.0.1:8000/api/db/getName/GtTJUiS05A1',
headers: {'X-Custom-Header': 'foobar'},
params: {
ID: 12345
},// 这个是get数据
data:{
},// 这个是json数据
// `responseType` 表示服务器响应的数据类型，可以是 "arraybuffer", "blob", "document", "json", "text", "stream"
responseType: "json", // 默认的
}).then((result) => {
 console.log(result.data.username)
})

写法二：

axios.get('/user', {
       params: {
           ID: 12345
       }
   }).then(function (response{
       console.log(response);
}).catch(function (error) {
    console.log(error)
})

二、流式打印输出

解释：主要用到onDownloadProgress方法接收后端传来的流式输出

this.$http({
   method: 'post',
   data: data,
   url: url,
   onDownloadProgress: function (progressEvent) {
       let content = progressEvent.event.currentTarget.response
       if (progressEvent.event.currentTarget.status == 200) {
           thisNew.$store.state.chat[thisNew.id].answer = content
           thisNew.answer = content
       } 
   }
},).then(function () {

   }
}).finally(function () {

})

三、封装使用

基础代码(request.ts)

import axios from 'axios'
/**
 * 对发给后端的请求进行拦截处理，对返回的结果进行拦截处理
 */
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 允许跨域携带cookie
axios.defaults.withCredentials = true

// 创建axios实例，axios是访问后端接口的异步调用
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: 'http://127.0.0.1:8000/',
  // 超时
  timeout: 10000
})

// request拦截器，对所有的请求进行拦截处理，作用就是对params进行处理http://www.baidu.com?a=1&b=2
service.interceptors.request.use(
  (config) => {
    // get请求映射params参数
    if (config.method === 'get' && config.params) {
      let url = config.url + '?'
      for (const propName of Object.keys(config.params)) {
        const value = config.params[propName]
        const part = encodeURIComponent(propName) + '='
        if (value !== null && typeof value !== 'undefined') {
          if (typeof value === 'object') {
            for (const key of Object.keys(value)) {
              const params = propName + '[' + key + ']'
              const subPart = encodeURIComponent(params) + '='
              url += subPart + encodeURIComponent(value[key]) + '&'
            }
          } else {
            url += part + encodeURIComponent(value) + '&'
          }
        }
      }
      url = url.slice(0, -1)
      config.params = {}
      config.url = url
    }
    return config
  },
  (error) => {
    message.error(error)
    console.log(error)
    Promise.reject(error)
  }
)

// 响应拦截器，对所有的响应进行拦截处理，对所有的响应进行分类处理
service.interceptors.response.use(
  (response) => {
    // 用于处理在url中包含code的情况，例如使用验证码登录
    if (response.config.url != null && response.config.url.includes('code')) {
      // 若请求头url路径是否包含code，返回全部信息
      return response
    } else {
      // 其他情况返回data中信息，response.data是一个对象，包括code、msg、data等属性
      const res = response.data

      // 结果信息包括错误码和错误信息
      if (Object.prototype.hasOwnProperty.call(res, 'code')) {
        // 含有错误码，根据不同错误码进行不同处理
        if (parseInt(res.code) === 200) {
          // 处理成功
          return res
        } else {
          // 处理失败请求
          message.error(res.msg || '未知错误')
          return Promise.reject(res)
        }
      }
      // 不含有错误码，直接返回结果
      return res
    }
  },
  (error) => {
    // 处理网络错误
    let msg = ''
    const status = error?.response?.status
    switch (status) {
      case 401:
        msg = '没有权限，请先登录！'
        break
      case 403:
        msg = '无权访问'
        break
      case 404:
        msg = '404页面不存在'
        break
      case 500:
        msg = '服务器出现问题'
        break
      default:
        msg = ''
    }
    return Promise.reject(error)
  }
)

export default service

调用方法

import request from '@/utils/request'
// get请求(带参)
list(pageNum: number, pageSize: number): Promise<ResponseModel> {
  const params = new URLSearchParams()
  params.append('pageNum', pageNum.toString())
  params.append('pageSize', pageSize.toString())
  return request({
    url: this.subBaseUrl + `list`,
    method: 'post',
    params: params
  })
}
// get请求(不带参)
getById(id: string | number): Promise<ResponseModel> {
  return request({
    url: this.subBaseUrl + `getById/${id}`,
    method: 'get'
  })
}

// post请求(data就是对象即可，上面配置默认发送json)
// params对应的是url参数例如下面为http://xxx.xxx.xxx/?pageNum=1&pageSize=5
list(data: object | null, pageNum: number, pageSize: number): Promise<ResponseModel> {
  const params = new URLSearchParams()
  params.append('pageNum', pageNum.toString())
  params.append('pageSize', pageSize.toString())
  return request({
    url: this.subBaseUrl + `list`,
    method: 'post',
    data:data,
    params: params
  })
}