vue-axios网络请求模块封装

---

前言

感谢coderwhy-王红元 老师.
上善若水,泽被后世.

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、常见的网络请求模块,以及优缺点对比.

常见的网络请求模块，以及优缺点对比。
JSONP的原理和封装
JSONP原理回顾
JSONP请求封装
axios的内容详解
认识axios网络模块
发送基本请求
axios创建实例
axios拦截器的使用

vue中发送网络请求如何选择?

选择一:传统的Ajax是基于XMLHttpRequest(XHR)为什么不用它呢?

非常好解释,配置和调用方式等非常混乱.
编码起来看起来就非常蛋疼.
所以真实开发中很少直接使用,而是使用jQuery-Ajax

选择二:在前面的学习中,我们经常会使用jQuery-Ajax

相对于传统的Ajax非常好用.
为什么不选择它呢?
首先,我们先明确一点:在Vue的整个开发中都是不需要使用jQuery了.
那么,就意味着为了方便我们进行一个网络请求,特意引用一个jQuery,你觉得合理吗?
jQuery的代码:1w+行.
Vue的代码才1w+行.
完全没有必要为了用网络请求就引用用这个重量级的握架;

选择三:官方在Vue1.x的时候推出了Vue-resource.

Vue-resource的体积相对于jQuery小很多.另外Vue-resource是官方推出的.
为什么不选择它呢?
在Vue2.0退出后, Vue作者就在GitHub的Issues中说明了去掉vue-resource,并且以后也不会再更新.
那么意味着以后vue-reource不再支持新的版本时,也不会再继续更新和维护.对以后的项目开发和维护都存在很大的隐患.

二、axios请求方式

2.1 安装axios

npm install axios --save

2.2axios基本使用

方式一:
代码如下（示例）：

import {
      createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from "axios";

createApp(App).use(store).use(router).mount('#app')
//默认get请求
axios ({
     
  url: 'http://123.207.32.32:8000/home/multidata'
}).then( res => {
     
  console.log(res);
})

该处使用的url网络请求的数据。

2.3 axios-发送并请求 处理并发请求

import {
     createApp} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from "axios";

createApp(App).use(store).use(router).mount('#app')


//axios-发送并请求  处理并发请求
axios.all([axios({
     
  url: 'httpbin.org'
}), axios({
     
  url: 'httpbin.org',
  params: {
     
    type: 'sell',
    page: 5
  }
})]).then(results => {
     
  console.log(results)
})

2.4 axios全局配置

在上面的示例中,我们的BaseURL是固定的
事实上,在开发中可能很多参数都是固定的且多次调用的.
这个时候我们可以进行一些抽取,也可以利用axios的全局配置

代码示例-全局配置baseURL,timeout:

axios.defaults.baseURL ='httpbin.org'
axios.defaults.timeout = 5000

2.5 axios的实例和封装

避免过度依赖第三方框架.

import axios from "axios";

export function request(config) {
     
  //1.创建axios实例
  const instance = axios.create({
     
    baseURL: 'httpbin.org',
    timeout: 5000
  })

  //发送网络请求
  return instance(config)
}

2.6 axios的拦截器使用

import axios from "axios";

export function request(config) {
     
  //1.创建axios实例
  const instance = axios.create({
     
    baseURL: 'httpbin.org',
    timeout: 5000
  })
  //2.axios的拦截器
  //请求时拦截
  axios.interceptors.request.use(config => {
     
    console.log(config)
    // 1.比如config中的一些信息不符合服务器的要求
    //2.比如每次发送网络请求时，都希望在界面中显示一个请求的图标
    // 3.某些网络请求(比如登录(token))，必须携带一些特殊的信息
    return config
      }, err => {
     
    console.log(err)
      });

  //响应时拦截
  axios.interceptors.response.use(res => {
     
    console.log(res)
    return res.data
  },err => {
     
    console.log(err)
  });

  //3.发送网络请求
  return instance(config)

}

---

总结

本文对axios做了简单使用总结.他是基于ajax封装完成的.