vue - axios网络封装模块

CoderZjz 2020-11-09 17:23:25
网络 vue 模块 axios 封装


功能特点

  1. 在浏览器中发送XMLHttpRequests请求
  2. 在node.js总发送http请求
  3. 支持Promise API
  4. 拦截请求和相应
  5. 转换请求和响应数据

axios请求方式

支持多种请求方式

axios(config)
axios.request(config)
axios.get(url[,config])
axios.delete(url[,config])
axios.head(url[,config])
axios.post(url[,data[,config]])
axios.put(url[,data[,config]])
axios.patch(url[,data[,config]])

安装、使用axios框架

npm install axios --save

之后在main.js

import Vue from 'vue'
import App from './App'
import axios from 'axios'
Vue.config.productionTip = false
new Vue({
el: '#app',
render: h => h(App)
})
// 这里默认使用axios(config)方法
axios({
url:'服务器地址',
method:'post' // 请求方法 默认为get
}).then(res => {
console.log(res); // 返回promise
})
axios({
url:'服务器地址',
// 专门get请求的参数拼接
params:{
type:'pop',
page: 1
}
}).then(res => {
console.log(res);
})

发送并发请求

  • 使用axios.all 可以放入多个请求数组
  • axios.all([])返回的结果是一个数组,使用axios.spread可以将数组[res1,res2]展开

同样是在main.js下

import Vue from 'vue'
import App from './App'
import axios from 'axios'
Vue.config.productionTip = false
new Vue({
el: '#app',
render: h => h(App)
})
axios.all([axios({
url:'服务器地址'
}),axios({
// 专门get请求的参数拼接
params:{
type:'pop',
page: 3
}
})]).then(result => {
console.log(result);
console.log(result[0]);
console.log(result[0]);
})
/* 使用axios.spread展开result */
axios.all([axios({
url:'服务器地址'
}),axios({
// 专门get请求的参数拼接
params:{
type:'pop',
page: 3
}
})]).then(axios.spread((res1, res2)) => {
console.log(res1);
console.log(res2);
})

对公共部分的抽取

事实上,开发中很多参数是固定的,可以进行抽取或者axios的全局配置

import Vue from 'vue'
import App from './App'
import axios from 'axios'
Vue.config.productionTip = false
new Vue({
el: '#app',
render: h => h(App)
})
// 公共配置
axios.defaults.baseURL = '地址'
axios.defaults.timeout = 100 // 请求访问超时时间
axios({
// baseURL: , 也可以写在这里
url:'服务器地址',
method:'post' // 请求方法 默认为get
}).then(res => {
console.log(res); // 返回promise
})

常见的配置选项

用到再去查文档

方法 语法
请求地址 url:'/user',
请求类型 method:'get',
请求根路径 baseURL:‘地址’,
请求前的数据处理 transformRequest:[function(data){}],
请求后的数据处理 transformResponse:[function(data){}],
自定义请求头 headers:{'x-Requested-With':'XMLHttpRequest'},
URL查询对象 params:{id:123},
查询对象序列化函数 paramsSerializer:function(params){}
request body data:{key:'aa'},
超时设置s timeout:1000,
跨域是否带token withCredentials:false,
自定义请求处理 adapter:function(resolve,reject,config){},
身份验证信息 auth:{uname:'',pwd:'12'},
响应数据格式 json/blob/docuent/arraybuffer/text/stream responseType:'json',

创建对应的axions实例

import Vue from 'vue'
import App from './App'
import axios from 'axios'
Vue.config.productionTip = false
new Vue({
el: '#app',
render: h => h(App)
})
// 创建第一实例
const instance1 = axios.creat({
baseURL: '服务器地址',
timeout: 1000
})
instance1({
url: '与服务器地址拼接的后续地址'
}).then(res => {
console.log(res);
})
instance1({
url: '可以与上面实例不同的后续地址',
params:{
type: 'pop',
page: 1
}
}).then(res => {
console.log(res);
})
//创建不同配置的实例
const instance2 = axios.creat({
baseURL: '地址',
timeout: 10000,
headers: {}
})

封装网络请求模块

正常在app.vue下复用性很低的请求网络数据

<template>
<div id="app">
<div>{{result}}</div>
</div>
</template>
<script>
import axios from 'axios'
export default{
name:'App',
components:{
},
data(){
return{
result:''
}
},
created(){
axios({
url:'服务器地址'
}).then(res => {
console.log(res);
this.result = res;
})
}
}
</script>

建立network文件夹,并在其中创建request.js的请求配置

import axios from 'axios'
/******************************/
// 方法1 //
/*****************************/
export function request(config, success, failure){
// 1. 创建axios的实例
const instance = axios.creat({
baseURl: '服务器地址',
timeout: 100
})
// 发送真正的网络请求
instance(config)
.then(res => {
//console.log(res);
success(res)
})
.catch(err => {
//cnsole.log(err);
failure(err)
})
}
/******************************/
// 方法2 //
/*****************************/
export function request(config){
// 1. 创建axios的实例
const instance = axios.creat({
baseURl: '服务器地址',
timeout: 100
})
// 发送真正的网络请求
instance(config.baseConfig)
.then(res => {
//console.log(res);
config.success(res)
})
.catch(err => {
//cnsole.log(err);
config.failure(err)
})
}
/******************************/
// 方法3 promise 方法【推荐】 //
/*****************************/
export new Promise((resolve, reject) => {
// 1. 创建axios的实例
const instance = axios.creat({
baseURl: '服务器地址',
timeout: 100
})
// 发送真正的网络请求
instance(config) // 这里或者直接 return instance(config) 这里返回值为就为promise
.then(res => {
resolve(res)
})
.catch(err => {
reject(err)
})
}

并在需要使用的地方请求


import {request} from "./network/request";
/******************************/
// 方法1对应请求方法 //
/*****************************/
request({
url: '/home/multidata'
}), res => {
console.log(res);
}, err => {
console.log(err);
}
/******************************/
// 方法2对应请求方法 //
/*****************************/
request({
caseConfig:{
},
success: function(res){
},
failure: function(err){
}
})
/******************************/
// 方法3 promise对应请求方法 //
/*****************************/
request({
url:'地址'
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})

拦截网络请求

请求拦截

import axios from 'axios'
export function request(config){
// 1. 创建axios的实例
const instance = axios.creat({
baseURl: '服务器地址',
timeout: 100
})
// 2. axios的拦截器
instance.interceptors.request.use(config => {
console.log(config);
// - 比如config中的一些信息不符合服务器的要求
// - 比如每次发送网络请求时,在界面中显示请求图标
// - 某些网络请求(比如登录token)必须携带一些东西
return config
}), err => {
console.log(err);
}
// 3. 发送真正的网络请求
return instance(config)
}

响应拦截

import axios from 'axios'
export function request(config){
// 1. 创建axios的实例
const instance = axios.creat({
baseURl: '服务器地址',
timeout: 100
})
// 2. axios的拦截器
instance.interceptors.response.use(res => {
console.log(res);
return res.data // 返回有用的信息
}), err => {
console.log(err);
}
// 3. 发送真正的网络请求
return instance(config)
}
版权声明
本文为[CoderZjz]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/coderzjz/p/13949587.html

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple