promise封装原生ajax、jqueryAjax、axios、fetch

原生js的ajax封装+promise

将原生js的ajax请求单独封装成一个数据请求的模块, 需要的时候直接调用即可

7.1.1. 配置文件

相关配置参数

    // 设置请求的路径  不填写baseURL
    url: '/api/selectData',

    // 设置请求的方法  get/post
    method: 'get',

    // get请求提交的参数
    params: params

    // 使用post请求向后台提交的数据, 需要使用qs库格式化
    data :qs.stringify(params)

代码实现

将ajax请求配置的部分单独存放到一个文件 ajax_config.js

    // 可以在此基础上进行面向对象结构的封装

    // 设置请求的baseUrl
    let baseURL = "http://39.108.8.219:8899"

    let ajax = function(config) {

        config.url = baseURL + config.url

        return new Promise(function(resolve, reject) {
            var ajax;
            // ajax的兼容
            if(window.XMLHttpRequest) {
                ajax = new XMLHttpRequest();
            } else {
                ajax = ActiveXconfigect('Microsoft.XMLHTTP');
            }

            // get请求
            if(config.method == 'get') {
                // get请求的参数处理
                if(config.params) {
                    let searchParams = ""
                    for(let i in config.params){
                        searchParams += '&' + i + '=' + config.params[i]
                    }
                    config.url = config.url + "?" + searchParams.slice(1)
                }
                ajax.open('get', config.url);
                ajax.send();
            }
            // post请求
            else {
                console.log(config)
                ajax.open('post', config.url);
                ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                ajax.send(config.data);
            }

            ajax.onreadystatechange = function() {

                if(ajax.readyState == 4 && ajax.status === 200) {
                    // 使用promise实现请求成功之后返回数据
                    resolve(JSON.parse(ajax.responseText))
                }
            }
        })

    }

    export default ajax;

7.1.2. 数据请求分离

在项目中, 将所有的数据请求单独分离到一个文件 api.js

// 原生,原生js的ajax+promise
import request from './ajax_config'

// 使用qs库对post提交的数据进行格式化
import qs from 'qs';

export function getStuData(params) {
  return request({
    url: '/api/selectData',
    method: 'get',
    params
  })
}

// add
export function addDataToStu(params) {
  return request({
    url: '/api/addDataToStu',
    method: 'post',
    data :qs.stringify(params)
  })
}

// delete
export function deleteById(params) {
    console.log(params)
  return request({
    url: '/api/deleteById',
    method: 'get',
    params
  })
}

// update
export function updataById(params) {
  return request({
    url: '/api/updataById',
    method: 'post',
    data:qs.stringify(params)
  })
}

7.1.3. 数据调用

在页面上实现数据调用, 在需要的地方导入 api.js中的相关方法

// 添加---------------------> 要添加的数据, 对象形式         
                addDataToStu({name:"",sex:""}).then((res) => {
                    console.log(res)
                })

// 删除--------------------->要删除的数据的id
                deleteById({id:id}).then((res)=>{
                    console.log(res)
                })

// 更新-------------------> 要修改的数据
                updataById({id:"",name:"",sex:""}).then((res) => {
                    console.log(res)
                })

// 查询
                getStuData().then((res) => {
                    console.log(res)
                })

7.2. jquery+promise

7.2.1. 配置文件

需要先在项目中安装jquery , 修改配置的话, 可以参考w3c , 地址 : http://www.w3school.com.cn/jquery/ajax_ajax.asp , 在这里包含了jquery的所有的配置, 可以根据需求选择使用的配置, 这里只是提供一个基本的使用方式

配置文件的实现 jquery_config.js

import $ from 'jquery'

// 设置请求的baseUrl
let baseURL = "http://39.108.8.219:8899"

let ajax = function(config) {

    config.url = baseURL + config.url

    return new Promise(function(resolve, reject) {
        $.ajax({
            url:config.url,
            dataType: "json",
            data:config.data||config.params,
            type: config.method,
            success(data) {
                resolve(data)
            },
            error(err) {
                reject(err)
            },
        })
    })

}

export default ajax;

7.2.2. 数据请求分离

在项目中, 将所有的数据请求单独分离到一个文件 , api.js

// 原生,原生js的ajax+promise
import request from './jquery_config'

// 使用qs库对post提交的数据进行格式化
import qs from 'qs';

export function getStuData(params) {
  return request({
    url: '/api/selectData',
    method: 'get',
    params
  })
}

// add
export function addDataToStu(params) {
  return request({
    url: '/api/addDataToStu',
    method: 'post',
    data :qs.stringify(params)
  })
}

// delete
export function deleteById(params) {
    console.log(params)
  return request({
    url: '/api/deleteById',
    method: 'get',
    params
  })
}

// update
export function updataById(params) {
  return request({
    url: '/api/updataById',
    method: 'post',
    data:qs.stringify(params)
  })
}

7.2.3. 数据调用

在页面上实现数据调用 , 从api.js中导入相关的数据请求的方法

// 添加---------------------> 要添加的数据, 对象形式         
                addDataToStu({name:"",sex:""}).then((res) => {
                    console.log(res)
                })

// 删除--------------------->要删除的数据的id
                deleteById({id:id}).then((res)=>{
                    console.log(res)
                })

// 更新-------------------> 要修改的数据
                updataById({id:"",name:"",sex:""}).then((res) => {
                    console.log(res)
                })

// 查询
                getStuData().then((res) => {
                    console.log(res)
                })

7.3. axios的实现

官方文档说明 https://www.npmjs.com/package/axios

如果需要修改相关的配置, 可以参考以上文档

7.3.1. 配置文件

以下是axios的配置文件 axios_config.js

// 实现axios的相关配置

import axios from 'axios'

// 创建axios实例
const service = axios.create({
    // baseURL: process.env.BASE_API, // api的base_url
    // baseURL: "http://127.0.0.1:8899",
    baseURL: "http://39.108.8.219:8899",
    timeout: 15000 // 请求超时时间
})
// request拦截器
// 添加请求拦截器
axios.interceptors.request.use(function(config) {
    // 在发送请求之前做些什么
    return config;
}, function(error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// respone拦截器
// 添加响应拦截器
axios.interceptors.response.use(function(response) {
    // 对响应数据做点什么
    return response;
}, function(error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

// 移除拦截器
var myInterceptor = axios.interceptors.request.use(function() { /*...*/ });
axios.interceptors.request.eject(myInterceptor);

export default service

7.3.2. 数据请求分离

在项目中, 将所有的数据请求单独分离到一个文件 api.js

// 原生,原生js的ajax+promise
import request from './axios_config'

// 使用qs库对post提交的数据进行格式化 ---- 在使用的时候需要先引入qs库
import qs from 'qs';

export function getStuData(params) {
  return request({
    url: '/api/selectData',
    method: 'get',
    params
  })
}

// add
export function addDataToStu(params) {
  return request({
    url: '/api/addDataToStu',
    method: 'post',
    data :qs.stringify(params)
  })
}

// delete
export function deleteById(params) {
    console.log(params)
  return request({
    url: '/api/deleteById',
    method: 'get',
    params
  })
}

// update
export function updataById(params) {
  return request({
    url: '/api/updataById',
    method: 'post',
    data:qs.stringify(params)
  })
}

7.3.3. 数据调用

在页面上实现数据调用 , 从api.js文件中导入相关的数据请求的方法

// 添加---------------------> 要添加的数据, 对象形式         
                addDataToStu({name:"",sex:""}).then((res) => {
                    console.log(res)
                })

// 删除--------------------->要删除的数据的id
                deleteById({id:id}).then((res)=>{
                    console.log(res)
                })

// 更新-------------------> 要修改的数据
                updataById({id:"",name:"",sex:""}).then((res) => {
                    console.log(res)
                })

// 查询
                getStuData().then((res) => {
                    console.log(res)
                })

7.4. fetch的实现

如果需要修改配置, 可以参考以下文档

w3c : https://www.w3cschool.cn/fetch_api/fetch_api-6ls42k12.html

MDN : https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch

7.4.1. 配置文件

以下是fetch请求的配置文件 fetch_config.js

// 设置请求的baseUrl----基准请求路径
let baseURL = "http://39.108.8.219:8899"

let ajax = function(config) {

    config.url = baseURL + config.url

    // 示例get请求的参数 , 将其拼接到 url 的后面
    if(config.params) {
        let searchParams = ""
        for(let i in config.params) {
            searchParams += '&' + i + '=' + config.params[i]
        }
        config.url = config.url + "?" + searchParams.slice(1)
    }

    return new Promise(function(resolve, reject) {

        var options = {
            method: config.method,
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: config.data
        }

        fetch(config.url, options)
            .then((res) => {
                return res.json()
            })
            .then((res) => {
                resolve(res)
            })
    })

}

export default ajax;

7.4.2. 数据请求分离

在项目中, 将所有的数据请求单独分离到一个文件 fetch_config.js

// 原生,原生js的ajax+promise
import request from './fetch_config'

// 使用qs库对post提交的数据进行格式化 ---- 需要先安装qs库
import qs from 'qs';

export function getStuData(params) {
  return request({
    url: '/api/selectData',
    method: 'get',
    params
  })
}

// add
export function addDataToStu(params) {
  return request({
    url: '/api/addDataToStu',
    method: 'post',
    data :qs.stringify(params)
  })
}

// delete
export function deleteById(params) {
    console.log(params)
  return request({
    url: '/api/deleteById',
    method: 'get',
    params
  })
}

// update
export function updataById(params) {
  return request({
    url: '/api/updataById',
    method: 'post',
    data:qs.stringify(params)
  })
}

7.4.3. 数据调用

在页面上实现数据调用, 从api.js文件中调用相关的数据的方法, 在需要的地方引入这个文件即可

// 添加---------------------> 要添加的数据, 对象形式         
                addDataToStu({name:"",sex:""}).then((res) => {
                    console.log(res)
                })

// 删除--------------------->要删除的数据的id
                deleteById({id:id}).then((res)=>{
                    console.log(res)
                })

// 更新-------------------> 要修改的数据
                updataById({id:"",name:"",sex:""}).then((res) => {
                    console.log(res)
                })

// 查询
                getStuData().then((res) => {
                    console.log(res)
                })

仅供记录学习，原文链接：http://www.lucklnk.com/godaddy/details/aid/671100772