Инкапсуляция аксиом в vue

внешний интерфейс Vue.js axios

Предисловие:По мере того, как мобильный бизнес компании становится все меньше и меньше, большая его часть приходится на веб-работу. Потому что раньше я немного изучил html5, так что на этот раз я планирую по-настоящему изучить Интернет. Конечно, я предпочитаю vue. В этой статье я расскажу об инкапсуляции axios в vue.

Конечно, первым делом нужно установить axios и сослаться на него. Это не то, о чем мы говорим.

1. Первый — это документ нашего интерфейса api.js.

Здесь я создал новую папку службы и новый файл api.js, где я только определил URL-адрес и метод запроса. Метод api.js выглядит следующим образом:

const CONTACT_API = {

    //获取首页新闻地址
    getHomeList: {
        method: 'get',
        url: '/brainofficial/news/getNewsPage'
    }
    
}

export default CONTACT_API

Во-вторых, второй шаг — инкапсулировать http.js для сетевых запросов.

http.js

import axios from 'axios'
import service from '../service/index.js'


//设置baseURL及超时时长
let instance = axios.create({
    baseURL: 'https://www.suiren.com',
    timeout: 10000
})


//定义包裹请求方法的容器
const Http = {}

//对api文档进行循环，并把每个方法都赋值到Http上去
for (let key in service) {
    //这里变量api就相当于getHomeList对象，包含了url 和method
    let api = service[key]
    //将方法赋值到Http里去(这里使用async的目的是为了，可能请求2个方法，方法2要在方法1请求完后再请求)
    Http[key] = async function (
        params,//要传递的参数
        isFormData = false,//是表单还是json上传
    ) {
        
        //请求网址
        let url = api.url
        
        //定义axios的config配置参数
        let config = {}
        let newParams = {}

        //判断content-type是否为表单形式，是否需要拼接在url上
        if (params && isFormData) {//如果有参数且为表单格式的话，把参数转换一下
            newParams = new FormData()
            for (let i in params) {
                newParams.append(i, params[i])
            }
        } else {
            newParams = params
        }

        let response = {}
        if (api.method === 'put' || api.method === 'post' || api.method === 'patch') {
            try {
                response = await instance[api.method](api.url, newParams, config)
            } catch (error) {
                response = error
            }

        } else if (api.method === 'delete' || api.method === 'get') {
            config.params = newParams
    
            try {
                response = await instance[api.method](api.url, config)
            } catch (error) {
                response = error
            }
        }

        return response//返回响应值

    }

}


// 拦截器的添加
instance.interceptors.request.use(config => {
    //发生请求前做什么(这个相当于移动端要展示loading圈一样)
    return config
}, err => {
    //请求错误(前端操作是，取消loading圈，并会弹出一个网络异常的提示)
    return Promise.reject(err)
})

//响应拦截器
instance.interceptors.response.use(res => {
    //请求成功了(前端做法是取消loading圈)|
    return res.data
}, err => {
    //请求失败(前端做法是取消loading圈给提示)
    return Promise.reject(err)
})




export default Http

3. Используйте

Прежде чем использовать его, мы должны смонтировать его на нашем экземпляре vue. Здесь я использую vue3 в main.js следующим образом:

import Http from './service/http'

//把Http挂载到vue的实例上
const app = createApp(App);
app.config.globalProperties.$Http = Http;
app.use(store).use(router).mount('#app')

Сделайте сетевой запрос следующим образом:

    async getList() {
      var res = await this.$Http.getHomeList()
      console.log(res)
    }

Помните, что мы определили параметры при инкапсуляции, могут ли параметры быть переданы или они в виде формы.Если здесь ничего не передается, это представляет значение по умолчанию.

Некоторые люди здесь могут спросить, если на веб-странице необходимо войти в систему, что мне делать, чтобы передать токен?

  • Способ 1: Можно добавить через перехватчики

  • Метод 2. Непосредственно используйте vuex для хранения токена и добавляйте его, когда будет установлено, что он имеет значение при инкапсуляции.

  • Способ 3: Конечно, его также можно использовать для передачи параметров на небеса, например:

      async getList() {
      var res = await this.$Http.getHomeList({value:xxx})
      console.log(res)
    }

Затем в пакете http.js

        let config = {
            headers:{
                token:""
            }
        }

config.headers.token = params.value

Суммировать:

Вот мое начальное понимание инкапсуляции, используемой axios в vue. Axios упакован в Vue, который должен быть упакован и модифицирован по-разному для соответствующих проектов. Студенты, у которых есть лучшие предложения, могут просмотреть,

Категории