网络模块封装-axios_axios 封装-优快云博客

本文链接：https://blog.youkuaiyun.com/full_moon_/article/details/136307690

（一）网络模块封装的选择

1. 常见的网络请求模块，以及优缺点对比

1.1 JSONP的原理和封装
        JSONP原理回顾
        JSONP请求封装
1.2 axios的内容详解
        认识axios网络模块
        发送基本请求
        axios创建实例
        axios拦截器的使用

2. 选择什么网络模块

Vue中发送网络请求有非常多的方式,那么,在开发中,如何选择呢?
2.1 选择一：传统的Ajax是基于XMLHttpRequest(XHR)
为什么不用它呢?

        非常好解释,配置和调用方式等非常混乱
        编码起来看起来就非常蛋疼.
        所以真实开发中很少直接使用,而是使用jQuery-Ajax
2.2 选择二:在前面的学习中,我们经常会使用jQuery-Ajax
        相对于传统的Ajax非常好用.
        为什么不选择它呢?
        在Vue的整个首先,我们先明确一点: 开发中都是不需要使用jQvery了.
        那么,就意味着为了方便我们进行一个网络请求,特意引用一个jQuery, 你觉得合理吗?
        jQuery的代码1w+行.
        Vue的代码才1w+行.
        完全没有必要为了用网络请求就引用这个重量级的框架
2.3 选择三:官方在Vue1.x的时候,推出了Vue-resource
        Vue-resource的体积相对于jQuery小很多，另外Vue-resource是官方推出的.
        为什么不选择它呢?
        在Vue2.0退出后,Vue作者就在GitHub的Issues中说明了去掉vue-resource,并且以后也不会再更新.
        那么意味着以后vue-reource不再支持新的版本时,也不会再继续更新和维护，
        对以后的项目开发和维护都存在很大的隐患.

2.4 选择四:在说明不再继续更新和维护vue-resource的同时,作者还推荐了一个框架: axios

为什么不用它呢?axios有非常多的优点,并且用起来也非常方便,

3. JSONP

3.1 在前端开发中,我们一种常见的网络请求方式就是JSONP
        使用JSONP最主要的原因往往是为了解决跨域访问的问题
3.2 JSONP的原理是什么呢?
        JSONP的核心在于通过<script>标签的src来帮助我们请求数据
        原因是我们的项目部罗在domain1.com服务器上时,是不能直接访问domain2.com服务器上的资料的.
        这个时候,我们利用<script>标签的src帮助我们去服务器请求到数据,将数据当做一个javascript的函数来执行,并且执行的过程中传入我们需要的json.
        所以, 封装jsonp的核心就在于我们监听window上的jsonp进行回调时的名称.

3.3 jsonp简单封装

4. axios

4.1 为什么选择axios?作者推荐和功能特点

4.2 功能特点：
        在浏览器中发送 XMLHttpRequests 请求
        在 node.js 中发送 http请求
        支持 Promise API
        拦截请求和响应
        转换请求和响应数据

等等

补充: axios名称的由来?个人理解
没有具体的翻译。axios: ajax i/o system.

4.3 安装axios

npm install axios --save

（二）axios框架的基本使用

1. 支持多种请求方式

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

2. 响应报文包括：响应行，响应空行，响应头，响应体

data: {}, 由服务器提供的响应
status: 200, 来自服务器响应的 HTTP 状态码
statusText: 'OK', 来自服务器响应的 HTTP 状态信息
headers: { }, http请求服务器响应的头
config: { }, 为请求提供的配置信息
request: { } 生成当前响应的请求

3. axios的基本使用（发送get请求演示案例）

// 导入axios
import axios from 'axios'

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

axios({
	url:'http://123.207.32.32:8000/home/multidata' ,  
	//httpbin.org  测试服务接口器
	method:'get'
}).then(res => {
	console.log(res);
})

axios({
	// url:'http://123.207.32.32:8000/home/data?type=sell&papge=1',
	url:'http://123.207.32.32:8000/home/data',
	// 专门针对get请求的参数拼接
	params:{
		type:'pop',
		page:1
	}
}).then(res => {
	console.log(res);
})

（三）axios发送并发请求

有时候,我们可能需求同时发送两个请求
1. 使用axios.all 可以放入多个请求的数组

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

2. axios.al([]) 返回的结果是一个数组，使用 axios.spread 可将数组 [res1,res2]展开为res1,res2

axios.all([axios({
	url:'http://123.207.32.32:8000/home/multidata'
}),axios({
	url:'http://123.207.32.32:8000/home/data',
	params:{
		type:'pop',
		page:1
	}
})]).then(axios.spread((res1,res2) => {
	console.log(res1);
	console.log(res2);
}))

（四）axios的配置信息相关

1. 全局配置

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

axios.defaults.baseURL = '123.207.32.32:8000'
axios.defaults.headers.post['content-Type']='application/x-www-form-urlencoded';

2.全局配置实例

// 提取全局配置
axios.defaults.baseURL = 'http://123.207.32.32:8000'
axios.defaults.timeout = 5000
// 发送并发请求
axios.all([axios.get('/home/multidata'),
	axios.get('/home/data',
		{params:{type:'pop',page:1}})])
	.then(axios.spread((res1,res2) => {
		console.log(res1);
		console.log(res2);
	})
)

3. 常见的配置选项

请求地址
    url: '/user'
请求类型
    method: 'get'
请根路径
    baseURL: 'http://www.mt.com/api'
请求前的数据处理
    transformRequest:[function(data){}].
请求后的数据处理
    transformResponse: [function(data){}],
自定义的请求头
    headers:{'x-Requested-With':'XMLHttpRequest'),
URL查询对象!
    params:{ id: 12 }
查询对象序列化函数
    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 /document /arraybuffer/text/stream
    responseType: 'json'

（五）axios的实例和模块封装

1. axios的实例

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

// 创建axios实例
const instance1 = axios.create({
	baseURL:'http://123.207.32.32:8000',
	timeout:5000，
    headers: {
        'Content-Type':'application/x-www-form-urlencoded'
    }
})

//发送网络请求
instance1({
	url:'/home/data',
	params:{
		type:'pop',
		page:1
	}
}).then(res => {
	console.log(res);
}).catch(err => {
    console.log(err);
})

2. 模块封装

（1）创建单独文件夹，封装axios模块

（2）封装一个request 模块

最终方案：

import axios from 'axios'

export function request(config) {
	// 1.创建axios实例
	const instance = axios.create({
		baseURL:'http://123.207.32.32:8000',
		timeout:5000
	})
	
	// 发送真正的网络请求
	return instance(config)
	// instance 本身返回的就是一个Promise
}

import {request} from './network/request.js';

request({
	url:'/home/data'
}).then(res => {
	console.log(res,'djf');
}).catch(err => {
	console.log(err);
})

方案一：

// 方案一
export function request(config,success,failure) {
	// 1.创建axios实例
	const instance = axios.create({
		baseURL:'http://123.207.32.32:8000',
		timeout:5000
	})
	
	// 发送真正的网络请求
	instance(config).then(res => {
		console.log(res);
		success(res)
	}).catch(err => {
		console.log(err);
		failure(err)
	})
}

request({
	url:'/home/data'
},res => {
	console.log(res,'hsdfih');
},err => {
	console.log(err)
})

方案二：

//方案二
export function request(config) {
	// 1.创建axios实例
	const instance = axios.create({
		baseURL:'http://123.207.32.32:8000',
		timeout:5000
	})
	
	// 发送真正的网络请求
	instance(config.baseConfig)
	.then(res => {
		// console.log(res);
		config.success(res)
	}).catch(err => {
		// console.log(err);
		config.failure(err)
	})
}

request({
	baseConfig:{
		
	},
	success:function(res) {
		
	},
	failure:function(err) {
		
	}
})

方案三：

//方案三
export function request(config) {
	return new Promise((resolve,reject) => {
		// 1.创建axios实例
		const instance = axios.create({
			baseURL:'http://123.207.32.32:8000',
			timeout:5000
		})
		
		// 传入对象进行网络请求
		instance(config)
		.then(res => {
			resolve(res)
		}).catch(err => {
			reject(err)
		})
	})
}

（六）axios的拦截器的使用

1. 四种拦截器：

请求成功，请求失败，响应成功，响应失败

axios提供了拦截器，用于我们在发送每次请求或者得到相应后，进行对应的处理。

//配置请求和响应拦截
instance.interceptors.request.use(config => {
    console.log('来到了request拦截success中');
    return config
}，err => {
    console.log('来到了request拦截failure中');
    return err
})

instance.interceptors.response.use(response => {
    console.log('来到了response拦截success中');
    return response.data
},err => {
    console.log('来到了response拦截failure中');
    return err
})

会将config拦截，无法拿到config，请求失败，会打印以上err，所以需要返回config，return config

2. 请求拦截器

请求拦截的作用：
        1.比如config中的一些信息不符合服务器的要求
        2.比如每次发送网络请求时，都希望在界面中显示一个请求的图标
        3.某些网络请求(比如登陆(token))，必须携带一些特殊信息

import axios from 'axios'
export function request(config) {
	// 1.创建axios实例
	const instance = axios.create({
		baseURL:'http://123.207.32.32:8000',
		timeout:5000
	})
	
	//2.axios的拦截器
	instance.interceptors.request.use(config => {
		console.log(config);
		return config
	},err => {
		console.log(err);
	})
	
	return instance(config)
}

import {request} from './network/request.js';
request({
	url:'/home/data'
}).then(res => {
	console.log(res,'djf');
}).catch(err => {
	console.log(err);
})

3. 响应拦截

import axios from 'axios'

export function request(config) {
	// 1.创建axios实例
	const instance = axios.create({
		baseURL:'http://123.207.32.32:8000',
		timeout:5000
	})
	
	//2.axios的拦截器
	instance.interceptors.request.use(config => {
		// console.log(config);
		return config
	},err => {
		console.log(err);
	})
	// 2.2响应拦截
	instance.interceptors.response.use(res => {
		// console.log(res);
		// 返回data
		return res.data
	},err => {
		console.log(err);
	})
	
	// 3.发送真正的网络请求
	return instance(config)
	// instance 本身返回的就是一个Promise
}

import {request} from './network/request.js';
request({
	url:'/home/data'
}).then(res => {
	console.log(res,'djf');
}).catch(err => {
	console.log(err);
})