Инкапсуляция запроса axios в vue

Vue.js

axios

Axios — это промис-ориентированная HTTP-библиотека, которую можно использовать в браузерах и node.js, а также является http-библиотекой, официально рекомендованной vue; инкапсуляция axios, с одной стороны, удобна для дальнейшего обслуживания, а с другой — , он также может настроить обработку запросов

Установить

npm i axios

упаковка

I запрос axios, инкапсулированный в http.js, запрос на повторное получение, отправка пакета запроса

Сначала введем аксиомы

import axios from 'axios'

Установить префикс запроса интерфейса

Как правило, у нас будут среды разработки, тестирования и производства для разработки.Префиксы необходимо различать.Мы используем переменные среды узла для вынесения суждений.

if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = 'http://dev.xxx.com'
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'http://prod.xxx.com'
}

При отладке на локальном хосте обычно возникают междоменные проблемы при прямом использовании адреса разработки, поэтому нам также необходимо настроить прокси

Этот проект создан с помощью vue cli3, а конфигурация прокси находится вvue.config.jsВ файле:

module.exports = {
  devServer: {
    proxy: {
      '/proxyApi': {
        target: 'http://dev.xxx.com',
        changeOrigin: true,
        pathRewrite: {
          '/proxyApi': ''
        }
      }
    }
  }
}

Это будет успешно/proxyApiуказал на'http://dev.xxx.com', перезапустите службу

Измените конфигурацию в http.js

if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = '/proxyApi'
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'http://prod.xxx.com'
}

перехватчик

Затем установите время ожидания и запросите информацию заголовка.

axios.defaults.timeout = 10000
// 请求头信息是为post请求设置
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

axios очень полезен, одним из которых является то, что его перехватчики очень мощные, мы можем устанавливать перехватчики для запросов и ответов, например, перехватчики запросов могут добавлять токены к каждому запросу, а также его удобно поддерживать после унифицированной обработки. перехватчик может выполнять ряд операций после получения ответа, таких как оценка статуса входа и авторизация в соответствии с кодом состояния.

// 请求拦截器
axios.interceptors.request.use(
  config => {
    // 每次发送请求之前判断是否存在token
    // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况，此处token一般是用户完成登录后储存到localstorage里的
    token && (config.headers.Authorization = token)
    return config
  },
  error => {
    return Promise.error(error)
  })
// 响应拦截器
axios.interceptors.response.use(response => {
  // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
  // 否则的话抛出错误
  if (response.status === 200) {
    if (response.data.code === 511) {
      // 未授权调取授权接口
    } else if (response.data.code === 510) {
      // 未登录跳转登录页
    } else {
      return Promise.resolve(response)
    }
  } else {
    return Promise.reject(response)
  }
}, error => {
  // 我们可以在这里对异常状态作统一处理
  if (error.response.status) {
    // 处理请求失败的情况
    // 对不同返回码对相应处理
    return Promise.reject(error.response)
  }
})

Получить пост пакет

httpGet: один параметр — это URL-адрес запроса, один — передаваемый параметр запроса, и возвращается объект обещания.

// get 请求
export function httpGet({
  url,
  params = {}
}) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params
    }).then((res) => {
      resolve(res.data)
    }).catch(err => {
      reject(err)
    })
  })
}

httpPost: Принцип аналогичен get.Следует отметить, что здесь есть дополнительный параметр данных.Перед отправкой почтового запроса необходимо выполнить над ним операцию с серийным номером.transformRequestВыполнить обработку, два других параметра url, params такие же, как и в запросе на получение;

// post请求
export function httpPost({
  url,
  data = {},
  params = {}
}) {
  return new Promise((resolve, reject) => {
    axios({
      url,
      method: 'post',
      transformRequest: [function (data) {
        let ret = ''
        for (let it in data) {
          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
      }],
      // 发送的数据
      data,
      // url参数
      params

    }).then(res => {
      resolve(res.data)
    })
  })
}

как использовать

Я поместил все вызовы интерфейса в файл api.js

Сначала введите инкапсулированный метод, а затем повторно инкапсулируйте вызываемый интерфейс в метод для его предоставления.

import { httpGet, httpPost } from './http'
export const getorglist = (params = {}) => httpGet({ url: 'apps/api/org/list', params })

Вызов на странице:

// .vue
import { getorglist } from '@/assets/js/api'

getorglist({ id: 200 }).then(res => {
  console.log(res)
})

Таким образом, API может управляться унифицированным образом, а обслуживание и модификация в будущем должны выполняться только в файле api.js.

полный код

Наконец, вставьте полный код

// http.js
import axios from 'axios'

// 环境的切换
if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = '/proxyApi'
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'http://prod.xxx.com'
}

// 请求拦截器
axios.interceptors.request.use(
  config => {
    token && (config.headers.Authorization = token)
    return config
  },
  error => {
    return Promise.error(error)
  })

axios.defaults.timeout = 10000

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

// 响应拦截器
axios.interceptors.response.use(response => {
  if (response.status === 200) {
    if (response.data.code === 511) {
      // 未授权调取授权接口
    } else if (response.data.code === 510) {
      // 未登录跳转登录页
    } else {
      return Promise.resolve(response)
    }
  } else {
    return Promise.reject(response)
  }
}, error => {
  // 我们可以在这里对异常状态作统一处理
  if (error.response.status) {
    // 处理请求失败的情况
    // 对不同返回码对相应处理
    return Promise.reject(error.response)
  }
})

// get 请求
export function httpGet({
  url,
  params = {}
}) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params
    }).then((res) => {
      resolve(res.data)
    }).catch(err => {
      reject(err)
    })
  })
}

// post请求
export function httpPost({
  url,
  data = {},
  params = {}
}) {
  return new Promise((resolve, reject) => {
    axios({
      url,
      method: 'post',
      transformRequest: [function (data) {
        let ret = ''
        for (let it in data) {
          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
      }],
      // 发送的数据
      data,
      // url参数
      params

    }).then(res => {
      resolve(res.data)
    })
  })
}

// api.js
import { httpGet, httpPost } from './http'
export const getorglist = (params = {}) => httpGet({ url: 'apps/api/org/list', params })

export const save = (data) => {
  return httpPost({
    url: 'apps/wechat/api/save_member',
    data
  })
}

// .vue
<script>
import { getorglist } from '@/assets/js/api'
export default {
  name: 'upload-card',
  data() {},
  mounted() {
    getorglist({ id: 200 }).then(res => {
      // console.log(res)
    })
  },
}
</script>

=========================================================

Обновление 25 марта

Прежде всего, спасибо моим друзьям, которые помогли мне выступить. Я не ожидал, что у этой статьи будет столько прочтений. Это оказалась просто случайная заметка. Я думал, что ее никто не читает. Когда я увидел больше, чем 100 сообщений в выходные, я немного удивился.

В ответ на комментарии в области комментариев статья была обновлена ​​и исправлена

Комментарии района сомневаются, почему многослойные пакеты обещают, а не напрямую возвращают аксиомы. Я здесь, чтобы быть единым описанием:

Конечно, вы можете вернуться напрямуюaxios.get().then(res=>res.data), написание более лаконичное; личные привычки программирования, чувствоresolve(res.data)Написание более элегантное, и это вопрос мнения, поэтому основной текст резервирует этот момент. Эта заметка также дает идею только для справки. Небольшие партнеры могут выбирать в соответствии со своими реальными потребностями бизнеса.

Мой клиент Xiaobai на этот раз также хочет зафиксировать использование axios.Если есть какие-либо несоответствия, я приветствую ваши комментарии (постарайтесь быть нежным), и я внесу коррективы и исправления, основанные на реальных потребностях бизнеса и мнениях каждого в будущее (постоянно).обновление~)

Категории