Инкапсулировать запросы мультиплексирования на основе аксиом в vue-cli

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

Пишите впереди:

С тех пор, как Vue2.0 рекомендовал всем использовать axios, axios узнают все больше и больше людей. Для всех относительно просто использовать axios для инициирования запроса, но axios не инкапсулируется и не используется повторно, а проект становится все больше и больше, что приводит к избыточности кода. было бы очень хлопотно. Итак, эта статья подробно познакомит вас с тем, как инкапсулировать запросы и повторно использовать запросы в компонентах проекта. Друзья в беде могут сделать ссылку, если вам нравится, вы можете поставить лайк или обратить внимание, я надеюсь, что это может помочь всем.

Эта статья была впервые опубликована в моем личном блоге:obkoro1.com

Установить

Просто установите на него axios.

npm install axios --save

Настройки прокси интерфейса

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

//文件位置：config/index.js
proxyTable: {
  '/api': {
    target: 'http://47.95.xxx.246:8080',  // 通过本地服务器将你的请求转发到这个地址
    changeOrigin: true,  // 设置这个参数可以避免跨域
    pathRewrite: {
      '/api': '/'
    }
  },
},

После настройки, когда вы хотите позвонить в проектhttp://47.95.xxx.246:8080Интерфейс на этом сервере можно использовать напрямую/apiвместо адреса сервера.

сделать запрос

В файле ввода main.js:

import axios from 'axios';//引入文件
Vue.prototype.$http = axios;//将axios挂载到Vue实例中的$ajax上面,在项目中的任何位置通过this.$http使用

Инициировать запрос без инкапсуляции:

//没有封装的时候，在组件中发起请求的方式：
   this.$ajax({
       url:'/api/articles',//api 代理到json文件地址，后面的后缀是文件中的对象或者是数组
       method:'get',//请求方式
       //这里可以添加axios文档中的各种配置
     }).then(function (res) {
       console.log(res,'成功');
     }).catch(function (err) {
       console.log(err,'错误');
     })
//还可以像下面这么简写
  this.$ajax.get('api/publishContent').then((res) => {
   console.log(res,'请求成功')
  },(err)=>{
    console.log(err,'请求失败');
  });

запрос пакета

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

Создайте три файла .js, которые я тщательно аннотировал, а картинки я вставлю прямо.В конце статьи я пришлю адреса этих трех файлов, и друзья, которым они нужны, подберут их.

fetch.js:

url.js:

api.js

Как использовать интерфейсы в компонентах:

Адрес файла axios пакета находится здесь:портал

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

Наконец: Если вам нужно перепечатать, пожалуйста, поставьте ссылку на оригинальный текст и подпишите его. Кодировать не просто,благодарныйслужба поддержки! Я пишу статью с менталитетом биржевых записей, и не хочу ее рвать, но приветствую подсказки. Тогда я надеюсь, что друзья, которые прочитают это, кликнуткак, также можнообрати внимание наПроверить меня.
сайт блога and Персональная домашняя страница Nuggets

Выше 2017.11.6

Категории