axios封装了ajax,封装一个基于axios的 Ajax

/* index.js */

/* GET请求 */

function testGet() {

axios({

url:'http://localhost:3000/posts',

method:'GET',

params:{

id:2,

xxx:"abc"

}

}).then(response=>{

console.log(response);

},error=>{

console.log(error.message);

})

}

/* Post请求 */

function testPost() {

axios({

url:'http://localhost:3000/posts',

method:'POST',

data:{

"title": "json-server----","author": "typicode----"

}

}).then(response=>{

console.log(response);

},error=>{

console.log(error.message);

})

}

/* PUT请求 */

function testPut() {

axios({

url:'http://localhost:3000/posts/2',

method:'PUT',

data:{

"title": "json-server666","author": "typicode666"

}

}).then(response=>{

console.log(response);

},error=>{

console.log(error.message);

})

}

/* Delete请求 */

function testDelete() {

axios({

url:'http://localhost:3000/posts/6',

method:'DELETE',

data:{

"title": "json-server----","author": "typicode----"

}

}).then(response=>{

console.log(response);

},error=>{

console.log(error.message);

})

}

/* 封装一个ajax基于axios */

function axios({

url,

method,

params={},

data={}

}) {

// 返回一个promise对象

return new Promise((resolve,reject)=>{

// 处理method 转换为大写

method = method.toUpperCase()

let queryString = ''// 处理query参数(拼接到url上) id=1&xxx=abc

Object.keys(params).forEach(v=>{

queryString+=`${v}=${params[v]}&`

})

if(queryString){

queryString = queryString.substring(0,queryString.length-1)

url += '?' + queryString

}

// 1. 执行异步ajax请求

const request = new XMLHttpRequest()// 1.1. 创建xhr对象

request.open(method,url,true)// 1.2. 打开链接(初始化请求, 没有请求)

// 1.3. 发送请求

if(method==='GET'||method==='DELETE'){

request.send()

}else if(method==='POST'||method==='PUT'){

request.setRequestHeader('Content-Type','application/json;charset=utf-8')// 告诉服务器请求体的格式是json

request.send(JSON.stringify(data)) // 发送json格式请求体参数

}

// 1.4 绑定状态改变的监听

request.onreadystatechange = function(){

// 如果请求没有完成, 直接结束

if(request.readyState!==4){

return

}

// 如果响应状态码在[200,300)之间代表成功, 否则失败

const {status,statusText} = request

// 2. 如果调用成功了, 调用 resolve

if(status>=200 && status<=299){

// 准备结果数据对象response

const response = {

data:JSON.parse(request.response),// 响应体(装换为json格式)

status,// 响应状态码

statusText// 响应文本

}

resolve(response)

}else{ // 3. 如果调用失败了, 调用 reject

reject(new Error('request error status' + status))

}

}

})

}