ajax封装，promise封装ajax，axios封装

一、概念

ajax：

核心XMLHttpRequest ，在不重新加载整个页面的情况下更新部分数据

promise：

承诺，只有三种模式（ pending：执行状态、fulfilled：已成功、rejected：已失败），且不受外界影响，解决回调地域

官网地址：https://www.promisejs.org/

axios：

基于promise的网络请求库

参考地址：使用说明 · Axios 中文说明 · 看云

二、使用（封装）

1、ajax（原生封装）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div>1121212</div><script>//封装ajax请求function fun (options) {//初始化默认值options = options || {}options.type = (options.type || 'POST').toUpperCase()const params = options.data// 创建XMLHttpRequest对象const xhr = new XMLHttpRequest()//发送请求if (options.type === "GET") {xhr.open('GET', options.url + "?" + getParams(params), true)xhr.send()} else if (options.type === "POST") {xhr.open('POST', options.url, true)//设置请求头xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");xhr.send(getParams(params))}//设置返回信息格式xhr.responseType="json"//接收返回信息xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300) {options.success(xhr.response)} else {options.fail("参数错误" + status)}}}}//调用fun({type: "post",url: 'http://192.168.166.146:8184/indexPage/readIndexPages',// url: ' http://192.168.166.146:8184/Topo/getCloudStatus',data: {name: 30},success: function (text, xml) { // 成功回调console.log(text, xml);},fail: function (status) { // 失败回调console.log(status);}})//处理传值形式function getParams (data) {let arr = []for (const key in data) {arr.push(`${key}=${data[key]}`)}return arr.join('$')}</script>
</body></html>

2、promise封装ajax


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div>1121212</div><script>//封装ajax请求function fun (options) {return new Promise((resolve, reject) => {//初始化默认值options = options || {}options.type = (options.type || 'POST').toUpperCase()const params = options.data// 创建XMLHttpRequest对象const xhr = new XMLHttpRequest()//发送请求if (options.type === "GET") {xhr.open('GET', options.url + "?" + getParams(params), true)xhr.send()} else if (options.type === "POST") {xhr.open('POST', options.url, true)//设置请求头xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");xhr.send(getParams(params))}//设置返回信息格式xhr.responseType = "json"//接收返回信息xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300) {resolve(xhr.response)} else {reject(new Error(xhr.statusText))}}}xhr.onerror = function () {reject(new Error(xhr.statusText))}//设置接口请求超时时间setTimeout(() => {//取消当前请求xhr.abort()}, 5000)})}//调用fun({type: "post",url: 'http://192.168.166.146:8184/indexPage/readIndexPages',// url: ' http://192.168.166.146:8184/Topo/getCloudStatus',data: {name: 30},}).then((res) => {console.log(res);}).catch((reson) => {console.log(reson);})//处理传值形式function getParams (data) {let arr = []for (const key in data) {arr.push(`${key}=${data[key]}`)}return arr.join('$')}</script>
</body></html>

3、axios（封装）

①、项目中src文件下创建utils文件，文件中创建request.js文件

import axios from 'axios'export default request = axios.create({baseURL: 'https://some-domain.com/api/',timeout: 1000,headers: {'X-Custom-Header': 'foobar'}
});

②、项目中src文件下创建api文件，里面创建对应模块test.js文件

import request from '@/utils/request'
export function getAllData(params){return request({method:'GET',url:'/xxx',params,})
}

③、api文件中创建index.js文件，并且引入api文件下其他js文件

import test1 from './test1'
import test2 from './test2'
import test3 from './test3'export default {test1,test2,test3,
}

④、挂载全局，在main.js文件中引入api文件下的index.js文件

import api from './api'Vue.prototype.$api=api

⑤、引用

this.$api.test.getAllData()//传参数调用接口

ajax封装，promise封装ajax，axios封装相关推荐

axios设置text html,axios封装动态设置Content-Type
问题如下: 有个问题是这样的后台给的API接口请求类型有两种 'Content-Type': 'application/json' 'Content-Type': 'application/x- ...
ajax和axios封装
Ajax 1.ajax理解 ajax是async JavaScript and xml /异步的js和xml 主要用来实现页面的局部刷新在浏览器里内置了ajxa的核心对象的:XMLHttpRequ ...
Promise实战AJAX封装
一.利用Promise的知识,对最开始的ajax的例子进行一个简单的封装: var url = 'xxx'; // 封装一个get请求的方法 function request(url){return ...
Promise基本使用，promise 与 Ajax封装
Promise是JS中进行异步编程的新的解决方案表达: ①从语法上看:Promise是一个构造函数 (自己身上有all.reject.resolve这几个方法,原型上有then.catch等方法) ...
jquery ajax请求封装 (promise)
在进入正文前先来一段小插曲: 封装ajax请求主要的目的在于减少冗余代码,而ajax请求的主要作用就是数据请求,那么数据处理就尤为重要了,那么怎样在封装的请求里面实现针对不同业务逻辑.不同数据结构等的 ...
ajax.then()用法,使用es6的then()方法封装jquery的ajax请求
使用场景: jsp页面中使用jquery的ajax请求比较频繁,以前vue框架的项目用过axios,所以就想着用then()封装一个公共请求的方法,这样每次请求就不用那么麻烦的写一大堆请求参数了. 示 ...
如何使用promis进行封装我们的ajax
如何使用promis进行封装我们的ajax 如何使用promis进行封装我们的ajax 如何使用promis进行封装我们的ajax 封装好的请求 function ajaxTo(request){// ...
ajax背景、ajax对象、ajax状态、ajax与http、ajax请求数据接口、同步与异步、ajax请求XML数据、封装ajax函数、artTemplate简介、同源策略和跨域请求、JSONP
AJAX简介: ajax背景: 1.AJAX(Asynchronous JavaScript And Xml)异步的 JavaScript 和 XML:ajax是浏览器提供的一套API,最早出现在谷歌 ...
ajax json 封装,Ajax--json（Ajax调用返回json封装代码、格式及注意事项）
Ajax调用json封装代码: //Ajax调用返回JSON public function JsonQuery($sql,$type=1,$db="mydb") { //定义数据 ...
ajax实现注册用户名时动态显示用户名是否已经被注册（1、ajax可以实现我们常见的注册用户名动态判断）（2、jquery里面的ajax也是类似我们这样封装了的函数）...
ajax实现注册用户名时动态显示用户名是否已经被注册(1.ajax可以实现我们常见的注册用户名动态判断)(2.jquery里面的ajax也是类似我们这样封装了的函数) 一.总结 1.ajax可以实现我 ...