将原生ajax封装成promise,promise封装原生ajax、jqueryAjax、axios、fetch

我们问什么要用promise封装ajax呢？是因为promise的then解决了回调地域的问题，所以咱们需要封装一下这样就可以在vue或是react里面使用了。

原生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的实现

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

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的实现

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

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)

})