promise ajax XMLhttpRequest基本用法以及封装axios库

Promise基本用法

const p = new Promise(resolve,reject){
	/*
		异步操作的代码
	*/
	if(true){
		resolve()
	}
	if(false){
		reject()
	}
}
p.then(value=>{
	console.log('中奖了',value)
},reason=>{
	console.log('没中奖',reason)
})

XMLHttpRequest基本用法

//1.创建对象
const xhr = new XMLHttpRequest();
//指定返回数据的类型
xhr.responseType = 'json'
//2.初始化
xhr.open('get',url);
//3.发送请求
xhr.send();
//4.处理响应结果
xhr.onreadystatechange = function(){
	if(xhr.readystate === 4){
		//判断响应码 2xx
		if(xhr.status => 200 && xhr.status < 300){
			//控制台输出响应体
			console.log('xhr.resonse')
		}else
		{
			//控制台输出响应状态码
			console.log(xhr.status)
		}
	}
}

第一种封装，自己拼接query参数数据

/*
ajax请求函数模块
返回值: promise对象(异步返回的数据是: response.data)
 */
import axios from 'axios'
export default function ajax (url, data={}, type='GET') {

  return new Promise(function (resolve, reject) {
    // 执行异步ajax请求
    let promise
    if (type === 'GET') {
      // 准备url query参数数据
      let dataStr = '' //数据拼接字符串
      Object.keys(data).forEach(key => {
        dataStr += key + '=' + data[key] + '&'
      })
      if (dataStr !== '') {
        dataStr = dataStr.substring(0, dataStr.lastIndexOf('&'))
        url = url + '?' + dataStr
      }
      // 发送get请求
      promise = axios.get(url)
    } else {
      // 发送post请求
      promise = axios.post(url, data)
    }
    promise.then(function (response) {
      // 成功了调用resolve()
      resolve(response.data)
    }).catch(function (error) {
      //失败了调用reject()
      reject(error)
    })
  })
}

第二种封装，直接axios.get(url,{params:data})

/*
能发送异步ajax请求的函数模块
封装axios库
函数的返回值是promise对象
1. 优化1: 统一处理请求异常?
    在外层包一个自己创建的promise对象
    在请求出错时, 不reject(error), 而是显示错误提示
2. 优化2: 异步得到不是reponse, 而是response.data
   在请求成功resolve时: resolve(response.data)
 */

import axios from 'axios'
import {message} from 'antd'

export default function ajax(url, data={}, type='GET') {

  return new Promise((resolve, reject) => {
    let promise
    // 1. 执行异步ajax请求
    if(type==='GET') { // 发GET请求
      promise = axios.get(url, { // 配置对象
        params: data // 指定请求参数
      })
    } else { // 发POST请求
      promise = axios.post(url, data)
    }
    // 2. 如果成功了, 调用resolve(value)
    promise.then(response => {
      resolve(response.data)
    // 3. 如果失败了, 不调用reject(reason), 而是提示异常信息
    }).catch(error => {
      // reject(error)
      message.error('请求出错了: ' + error.message)
    })
  })
}