пакет axios, интерфейс API для унифицированного управления, поддержка динамического API!

axios
пакет axios, интерфейс API для унифицированного управления, поддержка динамического API!

Поделитесь самоинкапсулированным сетевым запросом axios

Основные характеристики и их преимущества:

Управление всеми интерфейсами в одной папке (api.js). и может поддерживатьдинамический интерфейс, то есть можно использовать интерфейс, определенный в файле api.js.:xxЗанимается, динамически меняется по мере необходимости. Использование динамического интерфейса имитируетДинамическая маршрутизация vue, если вы не знакомы с динамической маршрутизацией, можете взглянуть на эту мою статью:Подробное объяснение параметров маршрутизации Vue (параметры и запрос)

1. Инкапсулируйте запрос:

  1. Сначала создайте каталог http в каталоге src. Идите вперед и создайте файл api.js и файл index.js в каталоге http.
  2. Затем импортируйте файл index.js из каталога http в файл main.js. Зарегистрируйте запрос как глобальный компонент.
  3. будет нижеИнкапсулировать необходимый кодВставьте код в соответствующую папку

2. Основное использование:

//示例：获取用户列表
getUsers() {
  const { data } = await this.$http({
    url: 'users' //这里的 users 就是 api.js 中定义的“属性名”
  })
},

3. Использование динамического интерфейса:

//示例：删除用户
deleteUser() {
  const { data } = await this.$http({
    method: 'delete',
    //动态接口写法模仿的是vue的动态路由
    //这里 params 携带的是动态参数，其中 “属性名” 需要与 api 接口中的 :id 对应
    //也就是需要保证携带参数的 key 与 api 接口中的 :xx 一致
    url: {
      // 这里的 name 值就是 api.js 接口中的 “属性名”
      name: 'usersEdit',
      params: {
        id: userinfo.id,
      },
    },
  })
},

4. Неадекватность:

Инкапсулированные запросы можно использовать только такthis.$http(). не можемthis.$http.get()илиthis.$http.delete()

Как я чувствую, используяthis.$http()Этого достаточно, поэтому никакая другая обработка инкапсуляции не выполняется.

Если у вас есть лучшие идеи, не стесняйтесь обращаться ко мне

Ниже приведен код, необходимый для инкапсуляции:

  • api.js управляет всеми интерфейсами
// 如下接口地址根据自身项目定义
const API = {
  // base接口
  baseURL: 'http://127.0.0.1:8888/api/private/v1/',
  // 用户
  users: '/users',
  // “修改”与“删除”用户接口（动态接口）
  usersEdit: '/users/:id',
}
​
export default API
​
  • Логический код index.js
// 这里请求封装的主要逻辑，你可以分析并将他优化，如果有更好的封装方法欢迎联系我Q：2356924146
import axios from 'axios'
import API from './api.js'
​
const instance = axios.create({
  baseURL: API.baseURL,
  timeout: '8000',
  method: 'GET'
})
​
// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 此处编写请求拦截代码，一般用于加载弹窗，或者每个请求都需要携带的token
    console.log('正在请求...')
    // 请求携带的token
    config.headers.Authorization = sessionStorage.getItem('token')
    return config
  },
  err => {
    console.log('请求失败', err)
  }
)
​
// 响应拦截器
instance.interceptors.response.use(
  res => {
    console.log('响应成功')
    //该返回对象会绑定到响应对象中
    return res
  },
  err => {
    console.log('响应失败', err)
  }
)
​
//options 接收 {method, url, params/data}
export default function(options = {}) {
  return instance({
    method: options.method,
    url: (function() {
      const URL = options.url
​
      if (typeof URL === 'object') {
        //拿到动态 url
        let DynamicURL = API[URL.name]
​
        //将 DynamicURL 中对应的 key 进行替换
        for (const key of Object.keys(URL.params)) {
          DynamicURL = DynamicURL.replace(':' + key, URL.params[key])
        }
​
        return DynamicURL
      } else {
        return API[URL]
      }
    })(),
    //获取查询字符串参数
    params: options.params,
    //获取请求体字符串参数
    data: options.data
  })
}
​
  • main.js регистрирует запрос как глобальный компонент
import Vue from 'vue'
​
// 会自动导入 http 目录中的 index.js 文件
import http from './http'
​
Vue.prototype.$http = http
Категории