美文网首页Web前端
promise封装原生ajax、jqueryAjax、axios

promise封装原生ajax、jqueryAjax、axios

作者: 安北分享 | 来源:发表于2021-08-27 18:00 被阅读0次

原生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

相关文章

  • promise封装原生ajax、jqueryAjax、axios

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

  • 【vue学习】axios

    Ajax、fetch、axios的区别与优缺点 axios的github地址 原生ajax jqueryAjax ...

  • 面试题

    axios和ajax的区别 axios是通过promise实现对ajax技术的一种封装axios可以运行nodej...

  • Ajax

    标签： Ajax 正文 一、实现一个原生Ajax 二、Ajax状态 三、将原生的 ajax 封装成 promise

  • axios获取数据

    Promise封装ajax axios获取数据 获取到的数据是res.data

  • JavaWeb--axios

    Axios：对原生的AJAX进行封装，简化书写官网：https://www.axios-http.cn[https...

  • 你真的了解ES6的promise吗？

    promise是一个构造函数，是用来解决ajax回调地狱的问题。axios就是用promise封装的。用于解决aj...

  • 前端常见面试题（十八）@郝晨光

    手写promise封装axios 其实，axios本身就是基于Promise进行封装的，我们之所以进行二次封装，主...

  • Axios入门学习

    Axios是AJAX的封装，基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 在项目...

  • 解析axios源码

    大致思路是这样子的，利用promise的链式调用，对ajax进行封装，请求结果通过then方法回传给axios，下...

网友评论

    本文标题：promise封装原生ajax、jqueryAjax、axios

    本文链接：https://www.haomeiwen.com/subject/mdnivltx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    Web前端

    关于我们|服务条款|联系我们|promise封装原生ajax、jqueryAjax、axios|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！