网络模块封装

选择什么网络模块

传统的Ajax
缺点:配置和调用方式等非常混乱
jQuery-Ajax
缺点:在Vue整个开发中都是不需要使用jQuery的
axios

axios

功能特点:

在浏览器中发送XMLHttpRequests请求
在Node.js中发送http请求
支持Promise API
拦截响应和请求
转换请求和响应数据

axios的基本使用

安装axios框架:
npm install axios --save
在入口文件main.js中引入axios并调用
注意:axios返回一个Promise对象,所以可以直接链式调用获取数据

import axios from 'axios'
axios({// 请求方式默认为get,如果需要改变请求方式的话,则需要使用如下方法methods:'get'url:'http://123.207.32.32:8000/home/multidata',// 专门针对get请求的参数拼接prarms:{type:'',page:1}
}).then(res =>{console.log(res);
})

axios发送并发请求

axios.all([axios({url:'http://123.207.32.32:8000/home/multidata'
}),axios({url:'http://123.207.32.32:8000/home/data',params:{type:'sell',page:3}
})]).then(res =>{console.log(res);
})

全局配置

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

//将公共配置单独抽取出来
axios.defaults.baseURL = '123.207.32.32:8080'
axios.defaults.hedaers.post['Content-Type'] = 'application/www-form-urlencoded';
// 使用全局axios和对应的配置进行网络请求
axios.all([axios({url:'http://123.207.32.32:8000/home/multidata'
}),axios({url:'http://123.207.32.32:8000/home/data',params:{type:'sell',page:3}
})]).then(res =>{console.log(res);
})

axios的实例

创建axios实例原因:

当我们从axios模块中导入对象时,使用的实例是默认的实例
当给该实例设置一些默认配置时,这些配置就被固定下来了
但是后续开发中,其中某些配置可能会不一样
比如某些请求需要使用特定的baseURL或者timeout或者content-Type等
这个时候,我们就可以创建新的实例,并且传入属于该实例的配置信息

const instance = axios.create({baseURL:'http://123.207.32.32:8000',timeout:3000
})
instance({url:'/home/multidata'
}).then(res =>{console.log(res);
})
instance({url:'/home/data',params:{type:'sell',page:3}
}).then(res =>{console.log(res);
})

axios的模块封装

在组件中引用axios模块并发送网络请求,但假如axios框架某天出现bug并不在维护时,那就需要更改大量的代码很是麻烦。所以为了防止这种问题的发生,我们最好对axios框架进行封装

在 src下创建一个network文件夹,并在其中创建一个request.js文件,在其中封装一个request函数,并将其导出.

将其中数据回调出去的三种方法:
3. 在request函数中分别设置三个请求参数(config,success,failure)

import axios from 'axios'
export function request(config,success,failure){//创建axios实例const instance = axios.create({baseURL:'http://123.207.32.32:8000',timeout:3000})instance(config).then(res =>{console.log(res);success(res)}).catch(err=>{console.log(err);failure(err)})})

返回一个Promise对象(推荐使用)

import axios from 'axios'
export function request(config){return new Promise((resolve,reject)=>{const instance = axios.create({baseURL:'http://123.207.32.32:8000',timeout:3000})instance(config).then(res =>{resolve(res)}).catch(err=>{reject(err)})})

return instance()(终极方案)

import axios from 'axios'
export function request(config){const instance = axios.create({baseURL:'http://123.207.32.32:8000',timeout:3000})return instance(config)
}

在入口文件main.js调用时，则需要使用

request().then(res =>{console.log(res)})
.catch(err =>{console.log(err)})

axios拦截器

axios提供了拦截器,用于我们在发送每次请求或者得到响应后,进行对应的处理(感觉类似于app.use中间件)
拦截器的作用:

比如config中的一些信息不符合服务器的要求,需要将其拦截
比如每次发送网络请求时,都希望在界面中显示一个请求的图标
某些网络请求请求(比如登录(token)),必须携带一些特殊的信息

// 表示拦截请求
instance.interceptors.request

  // 传入两个参数,参数为函数instance.interceptors.request.use( config =>{console.log(config);// 如果拦截时,就需要返回config,否则控制端会报错return config},err =>{console.log(err);})

// 拦截响应instance.interceptors.response

  // 传入两个参数,参数为函数instance.interceptors.response.use( res =>{console.log(res);// 如果拦截时,就需要返回config,否则控制端会报错return res},err =>{console.log(err);})

axios请求封装

import axios from 'axios'
export function request(config){const instance = axios.create({baseURL:'http://152.136.185.210:7878/api/m5',timeout:5000})instance.interceptors.request.use(config =>{console.log(config);return config},err=>{console.log(err);})instance.interceptors.response.use(res =>{console.log(res);return res.data},err=>{console.log(err);})return instance(config)
}

axios发送网络请求相关推荐

vue如何发送网络请求，使用axios事半功倍！
目录一.axios使用 1.支持多种请求方式: 2.安装 3.简单使用实例 4.发送并发请求 5.全局配置二.axios的实例 1.为什么要创建 axios的实例呢? 2.使用三..axios模 ...
promise的应用和在VUE中使用axios发送AJAX请求服务器
promise 用promise对函数封装: 原来的代码: <!DOCTYPE html> <html> <head><title>vue demo&l ...
Fetch发送网络请求
1. 文档 https://github.github.io/fetch/ https://segmentfault.com/a/1190000003810652 2. 特点 fetch: 原生函数, ...
网络编程-JavaScript中发送网络请求汇总
文章目录 1.前后端分离优势 2.HTTP协议的解析 2.1 HTTP的介绍 2.2 HTTP的组成 2.3 HTTP的版本 2.4 HTTP请求方式 2.5 HTTP请求头字段 2.6 HTTP响应 ...
使用rest_framework写api接口的一些注意事项(axios发送ajax请求)
1. 类继承GenericAPIView,定义queryset 印象深刻的事: 由于原来对于继承关系不太清楚,写接口 APIView/泛指GenericAPIView不太关注queryset 没有设置 ...
Vue之axios发送Ajax请求
2.10 axios发送ajax请求 axios github 2.10.1 准备工程创建一个django工程,例如 login.创建完成之后,再创建一个子应用,例如users.最后再设置一下模板文 ...
axios 发送 AJAX请求
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
ios php 表单提交图片上传,axios发送post请求提交图片表单步骤详解
这次给大家带来axios发送post请求提交图片表单步骤详解,axios发送post请求提交图片表单的注意事项有哪些,下面就是实战案例,一起来看一下. DOME 接口const userUploadA ...
解析Node.js通过axios实现网络请求
本次给大家分享一篇node.js通过axios实现网络请求的方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. 1.使用Npm 下载axios ...

axios发送网络请求