首页 > HTML5资源教程 > promise封装原生ajax、jqueryAjax、axios、fetch

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

日期：2018-08-03
来源：程序思维浏览：3486次
我们问什么要用promise封装ajax呢？是因为promise的then解决了回调地域的问题，所以咱们需要封装一下这样就可以在vue或是react里面使用了。

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)
                })
 
精品好课
最新完整React视频教程从入门到精通纯干货纯实战
最新完整React视频教程从入门到精通纯干货纯实战
React是目前最火的前端框架，就业薪资很高，本课程教您如何快速学会React并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习React高薪就...
jQuery视频教程从入门到精通
jQuery视频教程从入门到精通
jquery视频教程从入门到精通，课程主要包含：jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......
HTML5基础入门视频教程易学必会
HTML5基础入门视频教程易学必会
HTML5基础入门视频教程，教学思路清晰，简单易学必会。适合人群：创业者，只要会打字，对互联网编程感兴趣都可以学。课程概述：该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习...
最新完整React+VUE视频教程从入门到精，企业级实战项目
最新完整React+VUE视频教程从入门到精，企业级实战项目
React和VUE是目前最火的前端框架，就业薪资很高，本课程教您如何快速学会React和VUE并应用到实战，教你如何解决内存泄漏，常用库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习Re...
React实战视频教程仿京东移动端电商
React实战视频教程仿京东移动端电商
React是前端最火的框架之一，就业薪资很高，本课程教您如何快速学会React并应用到实战，对正在工作当中或打算学习React高薪就业的你来说，那么这门课程便是你手中的葵花宝典。
HTML5视频播放器video开发教程
HTML5视频播放器video开发教程
适用人群1、有html基础2、有css基础3、有javascript基础课程概述手把手教你如何开发属于自己的HTML5视频播放器，利用mp4转成m3u8格式的视频，并在移动端和PC端进行播放支持m3u8直播格式，兼容...
Vue2+Vue3+ES6+TS+Uni-app开发微信小程序从入门到实战视频教程
Vue2+Vue3+ES6+TS+Uni-app开发微信小程序从入门到实战视频教程
2021年最新Vue2+Vue3+ES6+TypeScript和uni-app开发微信小程序从入门到实战视频教程，本课程教你如何快速学会VUE和uni-app并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己...
VUE2+VUE3视频教程从入门到精通(全网最全的Vue课程)
VUE2+VUE3视频教程从入门到精通(全网最全的Vue课程)
VUE是目前最火的前端框架之一，就业薪资很高，本课程教您如何快速学会VUE+ES6并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习VUE高薪就...
收藏
扫一扫关注我们