网络请求模块选择——axios框架的基本使用和封装

上一篇&＃xff1a;【Vuejs进阶版】

axios &＃61; ajax i/o system

• 在浏览器中发送 XMLHttpRequests 请求
• 在 node.js 环境中发送 http 请求
• 支持 Promise API
• 拦截请求和相应
• 转换请求和相应数据
• 等等

axios 支持多种请求方式&＃xff1a;

• 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]])

1. vue init webpack learnaxios&＃xff1a;创建vue项目
2. npm install axios&＃64;0.18.0 --save&＃xff1a;安装axios【cd到相关目录下】
3. import导入
   

1、发送 get 请求演示&＃xff1a;

2、发送两个请求并发执行

• 第一种方法&＃xff1a;使用axios.all&＃xff0c;可以存放多个数组
  
• 第二种方法&＃xff1a;axios.all([])返回的结果是一个数组&＃xff0c;使用axios.spread可将数组[res1,res2]展开为 res1,res2
  

4、全局配置

开发中&＃xff0c;可能很多参数都是固定的&＃xff0c;这个时候我们可以进行一些抽取&＃xff0c;也可以利用 axios 的全局配置

常见的配置选项&＃xff1a;

1、为什么要创建 axios 的实例&＃xff08;instance&＃xff09;

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

请求成功、请求拦截
响应成功、响应拦截

做拦截处理

1、安装axios

npm install axios --save


2、创建模拟的配置文件
新建文件&＃xff1a;src\config\index.js

export default{title:"elm",baseUrl:{dev:"http://localhost:3000", //开发的时候后台接口的地址pro:"" // 上线产品发布之后&＃xff0c;后台接口的地址 }
}


3、使用axios做ajax请求

新建文件&＃xff1a;src\api\axios.js

import axios from &＃39;axios&＃39;
import config from &＃39;&＃64;/config&＃39;// 判断node的开发模式
const baseUrl &＃61; process.env.NODE_ENV &＃61;&＃61;&＃61; &＃39;developent&＃39; ? config.baseUrl.dev : config.baseUrl.pro
console.log(process.env.NODE_ENV);
class HttpRequest{// 配置要请求的URL地址constructor(baseUrl){this.baseUrl &＃61; baseUrl// 对请求队列进行处理this.queue&＃61;{}}// 设置很多的配置getInsideConfig(){const config &＃61; {baseURL:this.baseUrl,header:{// 请求头的配置}}return config}// 做一个拦截interceptors(请求实例,url)interceptors(instance,url){// 拦截请求instance.interceptors.request.use((config)&＃61;>{// 处理config,判断是否是所有的拦截都会通过这里console.log(&＃39;拦截和处理请求&＃39;);console.log(config);return config;})// 拦截响应instance.interceptors.reponse.use((res)&＃61;>{// 处理响应console.log(&＃39;处理响应&＃39;);console.log(res);return res.data;},(error)&＃61;>{// 请求出问题&＃xff0c;处理问题console.log(error);return {error:"网络出错了"}})}request(options){const instance &＃61; axios.create() //创造实例对象// 与上文getInsideConfig()形成呼应&＃xff0c;options会覆盖掉this.getInsideConfigoptions &＃61; Object.assign(this.getInsideConfig(),options)// 进行数据劫持this.interceptors(instance,options.url)return instance(options)}}
// 实例化拦截对象
const axiosObj &＃61; new HttpRequest(baseUrl)
// 导出
export default axiosObj


新建文件&＃xff1a;src\api\data.js

// 对外做ajax请求
import axios from &＃39;&＃64;/api/axios&＃39;export const getBannerData &＃61; ()&＃61;>{return axios.request({url:"banner",methods: &＃39;get&＃39;})
}


测试&＃xff1a;

views\Home.vue文件中

<template><div class&＃61;"home"><h1>HOME</h1></div>
</template><script>
// &＃64; is an alias to /src
import HelloWorld from &＃39;&＃64;/components/HelloWorld.vue&＃39;
import {getBannerData} from &＃39;&＃64;/api/data&＃39;export default {name: &＃39;Home&＃39;,components: {HelloWorld},async mounted(){let result &＃61; await getBannerData()console.log(result);}
}
</script>


运行elm项目&＃xff1a;npm run serve
模拟编写后端数据&＃xff0c;供前端使用
与elm同级新建elmserve/index.js文件&＃xff0c;内容如下&＃xff1a;

let express &＃61; require(&＃39;express&＃39;)
let app &＃61; express()// 解决跨域问题
app.use((req,res,next)&＃61;>{res.append(&＃39;Access-Control-Allow-Origin&＃39;,&＃39;*&＃39;)res.append(&＃39;Access-Control-Allow-headers&＃39;,&＃39;*&＃39;)next()
})app.get(&＃39;/&＃39;,(req,res)&＃61;>{res.json({msg:"这是首页"})
})app.get(&＃39;/banner&＃39;,(req,res)&＃61;>{res.json({msg:"这是banner"})
})app.listen(3000,()&＃61;>{console.log(&＃39;http://localhost:3000&＃39;);
})


下一篇&＃xff1a;【Vue项目开发】