手机应用开发工具_中国服装网官网_学seo优化_南通百度网站快速优化

1.定义一个函数

function myAxios(config){}

1. 此时我们要考虑axios中是如何使用的，axios 中可能会存在 url(资源路径) ,params（请求参数）,method（请求方式）,data（请求数据），其中url一定是要有的
2. 我们要有一定的知识储备，如Promise, URLSearchParams, XHL 的一些基本的使用

2. 给函数添加相应的逻辑

1. 判断有没有params选项

  if (config.params) {// 2.使用URLSearchParams 转换，并携带到url上// 构造函数 得到的是 一个对象const paramsObj = new URLSearchParams(config.params)const queryString = paramsObj.toString()// 把查询参数字符串，拼接在url? 后面config.url += `?${queryString}`}

2. 判断有没有data选项，携带请求体

    if (config.data) {// 2. 将对象转换成JSON字符串const jsonStr = JSON.stringify(config.data)// 3. 在发送请求体时，要说命数据的类型xhr.setRequestHeader('Content-Type', 'application/json')xhr.send(jsonStr)} else {xhr.send()}

3. 代码的核心逻辑

		// 添加相应的请求方式，和资源路径xhr.open(config.method || 'GET', config.url)// 绑定loadend事件xhr.addEventListener('loadend', () => {// 判断是否成功if (xhr.status >= 200 && xhr.status < 300) {// 成功调用，成功回调函数resolve(JSON.parse(xhr.response))} else {// 失败 调用失败回调函数reject(new Error(xhr.response))}})

3. 完整版代码

    function myAxios(config) {return new Promise((resolve, reject) => {const xhr = new XMLHttpRequest()// 1.判断有没有params选项， 携带查询参数if (config.params) {// 2.使用URLSearchParams 转换，并携带到url上// 构造函数 得到的是 一个对象const paramsObj = new URLSearchParams(config.params)const queryString = paramsObj.toString()// 把查询参数字符串，拼接在url? 后面config.url += `?${queryString}`}// 添加相应的请求方式，和资源路径xhr.open(config.method || 'GET', config.url)// 绑定loadend事件xhr.addEventListener('loadend', () => {// 判断是否成功if (xhr.status >= 200 && xhr.status < 300) {// 成功调用，成功回调函数resolve(JSON.parse(xhr.response))} else {// 失败 调用失败回调函数reject(new Error(xhr.response))}})// 1. 判断有没有data选项，携带请求体if (config.data) {// 2. 将对象转换成JSON字符串const jsonStr = JSON.stringify(config.data)// 3. 在发送请求体时，要说命数据的类型xhr.setRequestHeader('Content-Type', 'application/json')xhr.send(jsonStr)} else {xhr.send()}})}