常用接口请求

javascript

发布日期: 2024-08-08

更新日期: 2024-08-08

文章字数: 3.2k

阅读时长: 13 分

阅读次数:

一、ajax

ajax（Asynchronous javascript and XML）异步的js和xml

ajax是为了实现异步请求，解决单线程的问题才存在的；

单线程

只有一条语句执行，如果前面的错误了，后面的无法执行；

不需要刷新整个页面，刷新页面中的一小部分，后台和服务器之间进行少量的数据交换

异步：不需要等待，可以执行其他的，定时器也是异步的；

同步：需要等待前一步执行，才能开始一下步执行；

工作原理：

通过XMLHttpRequest对象来向服务器发出异步请求，从服务器获得数据，然后用Javascript来操作DOM而更新页面

ajax的优缺点

优点
- （1）页面不需要刷新，在页面内与服务器通信，给用户的体验非常好
- （2）使用异步方式与服务器通信，不需要打断用户操作，具有更加迅速的响应能力
- （3）可以减少服务器的负担，利用客户端闲置能力来处理任务
ajax的缺点：
- （1）ajax干掉了back按钮，即对浏览器后退机制的破坏；
- （2）安全出现问题，因为ajax技术就像是直接建立一个通道,会暴露比以前更多的数据和服务器逻辑；
- （3）对搜索引擎的支持比较弱；
- （4）破坏了程序的异常机制；
- （5）违背了url和资源定位的初衷；
- （6）一些手机设备现在还不能更好的支持ajax；

使用方法

// 声明
var ajax = new XMLHttpRequest()
// 建立接口
ajax.open(method,url,async)
// 发送
ajax.send()
// 接收
ajax.onreadystatechange = function(){
    if(ajax.readyState === 4 && ajax.status === 200){
        console.log(ajax.responseText)
    }
}

ajax的open参数介绍
1. method分为post和get；
2. url：地址，传输或获取的地址，
3. async定义异步或同步，true是异步的，false是同步的；
发送：
1. get方式下
2. post方式下：
ajax.setRequestHeader('Content-type','application/x-www-form-urlencoded;charset=UTF-8');（设置头信息必须放在open后面）

ajax.send()；必须在发送之前设置头信息，否则会报错；
结果

每当 readyState 改变时，onreadystatechange 函数就会被执行。
1. ajax.readyState，存有服务器响应的状态信息；
  - 0：未初始化，声明初始化，没有调用open；
  - 1：启动，建立接口（调用了open），没有调用send；
  - 2：发送，调用了send已经发送
  - 3：接收，等待结果（后续操作）；
  - 4：成功，已经接收到全部响应数据，而且已经可以在客户端使用了（如果写原生的js ajax请求需要等到 readyState==4的时候再做处理）其他的js库已经做好处理了
2. ajax.status 状态码
  - 1xx：信息响应类，表示接收到请求并且继续处理
  - 2xx：处理成功响应类，表示动作被成功接收、理解和接受
  - 3xx：重定向响应类，为了完成指定的动作，必须接受进一步处理
  - 4xx：客户端错误，客户请求包含语法错误或者是不能正确执行
  - 5xx：服务端错误，服务器不能正确执行一个正确的请求
3. ajax.responseText 将结果以字符串的形式返回；
  - eval(val)：将字符串转换成真正的数据类型；
  - JSON.parse(val)：将json格式的字符串转为对象；

method

得到数据，一般使用get，上传数据一般使用post，不是严格要求的；

get方式需要将传输的内容通过?问号的形式写在地址后面如：a=1&b=2；
post方式接口需要设置请求头信息：post方式发送请求在send小括号里面传数据；

post方式和get方式的区别

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
get方式无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

let ajax = new XMLHttpRequest()
ajax.open('get','http://39.107.82.176',true)
ajax.send()
ajax.onreadystatechange = function(){
    if(ajax.status === 200 && ajax.readyState === 4){
        console.log(ajax.responseText)
    }
}

post请求发送数据方法：

var xhr = new XMLHttpRequest()
xhr.open('post', '***')
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
xhr.send(new URLSearchParams({name: 'hhh'}))
xhr.onload = function(){
    var res = JSON.parse(xhr.response)
}

XHR新增的事件

timeout 请求超时时触发
error 请求失败时
abort 请求中断时
load 响应成功后
loadstart 开始请求时
loadend 结束响应时
progress 请求响应过程中连续触发
upload.onprogress(e) 上传进度监听；

// 请求一个接口
let xhr = new XMLHttpRequest()
xhr.open('GET', 'http://wyy.heny.vip/banner', true)
xhr.onloadstart = function(){
    console.log('开始请求')
}
xhr.onload = function(progressEvent){
    console.log(JSON.parse(xhr.response))
}
xhr.onerror = function(){
    console.log('请求出错了')
}

ProgressEvent

属性 loaded 当前下载了多少字节
属性 total 总的字节数
属性 lengthComputable 长度是否可计算

通过判断长度是否可计算之后再进行loaded/total即可；

let xhr = new XMLHttpRequest();
const downloadUrl = 'installer.dmg';
xhr.open('GET', downloadUrl, true);
xhr.addEventListener('progress', function (event) {
// 响应头要有Content-Length
if (event.lengthComputable) {
  let percentComplete = event.loaded / event.total;
  console.log(percentComplete); // 最后输出1
}
}, false);
xhr.send();

前提是响应头里面有Content-Length这个字段告知当前文件的总字节数，如下图所示：

封装xhr请求方法

function request({
  url,
  method = "get",
  data,
  headers = {},
  onProgress = e => e
}) {
  return new Promise(resolve => {
    const xhr = new XMLHttpRequest();
    xhr.upload.onprogress = onProgress;
    xhr.open(method, url);
    Object.keys(headers).forEach(key =>
      xhr.setRequestHeader(key, headers[key])
    );
    xhr.send(data);
    xhr.onload = e => {
      resolve(JSON.parse(e.target.response));
    };
  });
}

二、axios

优点

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

快速使用

安装：npm install axios
或使用cdn地址：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

请求方法

get请求（get传参需要使用params传参）

axios.get('/user?id=12').then(res=>{}).catch(err=>{})
axios.get('/user',{params:{id:123})

post请求

axios.post('/user', {id: 666})

// 如果后台没有接收到参数，使用qs转换一下，需要npm i qs安装;
let params = new URLSearchParams()
params.append('id', 666)
或：let params = qs.stringify({id:666});
// network中显示form Data才算成功；
this.$axios.post('/user', params).then....

多个并发请求

get1(){return axios.get('/user/123');
get2(){return axios.get('/user/123/permissions');

axios.all([this.get1(),this.get2()])
.then(axios.spread((acct,perms)=>{}))
// spread为分页,如果不使用spread也可以直接使用res，是一个数组;

axios拦截器

创建文件夹api/index

import axios from 'axios'
import { Loading, Message } from 'element-ui'
let loading = null
axios.interceptors.request.use(
    config=>{
        // 在发起请求事要做的事情  可以给config添加请求头等
        loading = Loading.service({
            text: '正在加载......'
        })
        return config
    },
    error=>{
        return Promise.reject(error)
    }
)
axios.interceptors.response.use(
    response=>{
        // 对响应的事情要做的事情
        if(loading) loading.close()
        return response
    },
    error=>{
        if(loading) loading.close()
        if(!error.response){
            if(error.message.includes('timeout')){
                Message.error('请求超时，请检查网络是否连接正常')
            } else {
                Message.error('请求失败, 请检查网络是否已连接')
            }
            return
        }
        return Promise.reject(error)
    }
)
export const getData = (url,data={},method='get')=>{
    let config = {
        url,
        method:method.toLowerCase(),
        data
    }
    // get方式需要处理, 使用params传参
    if(method.toLowerCase() === 'get'){
        config.params = data
    }
    return axios(config)
}

在需要请求数据的地方引入getData即可

axios取消请求接口

业务情况：多次点击页面，会造成很多接口的请求，可以在页面切换关闭上一个请求，效果如下

在请求拦截器中作处理：

import axios from 'axios'
let cancelArr = {} // 保存需要取消的接口
axios.interceptors.request.use(
    config => {
        // 判断请求该接口是否需要删除上一个接口
        if(config.data.cancelToken) {
            // 循环取消当前保留的接口
            for(let prop in cancelArr) {
                cancelArr[prop]()
            }
            // 对该接口添加取消事件, 注意：必须挂载到config上面去
            config.cancelToken = new axios.CancelToken(cancel => {
                cancelArr[config.url] = cancel
            })
        }
    }
)
axios.interceptors.response.use(
    response => {
        // 接口回来删除该接口
        if(response.config.cancelToken) {
            delete cancelArr[response.config.url]
        }
    }
)

之后哪个接口需要取消的话，直接发送一个{cancelToken: true}即可；

常用config配置

{
    // 请求方法
    method: 'get', 
    // 根路径
    baseURL: 'http://heny.vip',
    // 自定义请求头
    headers: {},
    // 发送数据，用于get
    params: {},
    // 发送数据, 用于POST
    data: {},
    // 指定超时
    timeout: 1000,
    // 解决cookie跨域
    withCredentials: false,
    // 返回类型，常用有：blob、stream
    responseType: 'json',
    // 上传处理进度
    onUploadProgress: function(progressEvent){},
    // 下载处理进度
    onDownloadProgress: function(progressEvent){},
    // 代理请求，在ip被拉黑时特别有用
    proxy: {
        host: '127.0.0.1',
        port: 9000
    },
    // 取消请求;
    cancelToken: new CancelToken(function(cancel) {})
}

修改默认值

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

也可以自定义一个实例

var instance = axios.create({
    baseURL: '...'
})

二、superagent

支持链式调用

安装：yarn add superagent；

const superagent = require('superagent');
superagent
    .post('/api/pet')
    .send({name: 'manny'})
    .set('X-API-Key', 'foobar')
    .end((err, res) => {})

(async () => {
    let res = await superagent.post('/api/pet')
})

推荐文档：SuperAgent使用文档

三、vue-resource

快速使用

安装： yarn add vue-resource
main.js导入

import VueResource from 'vue-resource'
Vue.use(VueResource);

vue-cli配置模拟假数据

地址：build文件夹—>webpack.dev.conf.js文件添加

引入插件

const url = require('url')
const bodyParser = require('body-parser')

定义路由（在devServer下加入）

before(app){
    app.use(bodyParser.urlencoded({extended:true})) //加载中间件
    app.get('/api/seller', (req, res) => {
       res.json({errno: 0,data: ['jack','rose','peter','jerry']})
    }),
    app.post('/api/addSeller', (req, res) => {
        res.json({
            errno:0,
            data:'success'
        })
    })
    app.get('/api/goods', (req, res) => {
        //处理JSONP请求
        let $url = url.parse(req.url,true)
        let ck = $url.query.callback
        let result = ck+'('+123+')'
        res.send(result)
    })
}

JSONP请求，处理callback

let $url = url.parse(req.url,true)  //true解析为对象模式;
let ck = $url.query.callback  //取出回调函数
let result = ck+'('+123+')'  //给前端传参
res.send(result)

让其他人访问自己的地址

在config–index.js文件下修改

const ip = require('ip')
host: ip.address()   //将localhost改为ip.address();

接口调用方法

get方式（后台接参：req.query）

this.$http.get(url,[option]).then(successCallback,[errorCallback]);(后台无法接收前台发来的数据，发送请求需要用下面的)

//或使用大括号形式：
this.$http({url:'',params: {}}).then(res=>{res.body}).catch(fn)   //catch捕捉错误
 //params要发送的数据;

//也可以配合async函数调用：
let result = await this.$http(..)
//this.$http返回一个promise函数，可以调用then方法;

post方式（后台接参：req.body）

this.$http.post('',{},{emulateJSON:true,emulateHTTP:true}).then(res=>{})
  //第二个参数为要向后台发送的数据;

emulateJSON:true：设置表单：application/x-www-form-urlencoded；必须填写;emulateHTTP:true：处理restful：put/patch/delete等请求;

JSONP方式（后台接参：req.query）

this.$http.jsonp(url,[option])     //后台无法接参，需要用下面的;
this.$http({url:'',params:'',method:'jsonp',jsonp:'callback'})

其他快捷方法
- get(url, [options])
- head(url, [options])
- delete(url, [options])
- jsonp(url, [options])
- post(url, [body], [options])
- put(url, [body], [options])
- patch(url, [body], [options])
查看是否发送成功

F12查看控制台—Network—headers；点击clear清除一下，再获取，之后headers翻到最下面，post方式中：form data就是发送成功，后台能够正常接收到数据，Request Payload没收到；

四、fetch

fetch为原生方法，不需要下载任何插件

fetch可以跨网络异步获取资源

请求方法

fetch('https://wyy.heny.vip/banner').then(response=>response.json()).then(data=>{
    console.log(data) // 需要两次then回调才能获取数据;
})

// 常用方式
async function fetchData(){
    let response = await fetch('https://wyy.heny.vip/banner')
    let res = await response.json()
    console.log(res)
}

// post方法
fetch('http://localhost:3000/upload', {method: 'post', headers: {'Content-Type': '...'}, body: JSON.stringify({file: '...'})}).then(res => res.json()).then(data => ....)

fetch与jQuery.ajax()的不同

当接收响应状态码是404或500，promise状态仍然是resolve，但是response的返回值ok属性是false；
由于fetch返回的只是一个http响应，而不是真的JSON，为了获取JSON的内容，需要使用json()方法

fetch是一个实验的API，在生产环境不建议使用

五、跨域

CORS（跨域资源共享）

优点：简单、只需在后台写一句话、GET、POST都支持
缺点：兼容性不如JSONP

res.writeHead(‘Access-Control-Allow-Origin’,’*’)

JSONP(本质上是XHR，动态生成script标签)

兼容性好
只支持get方式

因为script标签没有跨域的限制，所以是伪Ajax；

利用proxy代理

修改config—index.js文件下的proxyTable的值
特点：跨域失败仅存在于(Ajax),NodeJS(A程序) ===》 PHP(B程序)后台之间是不存在跨域失败
场景：后台(Java)<=>前端(WebPack)[Proxy]
场景：公开API[JSONP]

// webpack配置代理
proxyTable: {
    '/api': {    //api前台访问时需要加的前缀；
    target: 'http://v.juhe.cn',  //需要代理访问跨域的域名
    changeOrigin: true,    // 是否设置跨域
    pathRewrite: {"^/api" : ""} }  //地址重写;
},

// 前台请求
this.$axios.get('/api/movie/index')   //带上前缀，连接到访问的地址
// 最终请求的地址为：http://v.juhe.cn/movie/index

heny

https://blog.hrhe.cn/29d7.html

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 heny !

ajax axios fetch javascript

包管理工具

npm包管理工具，常用的前端工程化

2024-08-08 npm

npm yarn nvm nrm

正则

常用正则内容分享，包含高阶技巧，实例分享

2024-08-08 javascript

RegExp

一、ajax

单线程

工作原理：

ajax的优缺点

使用方法

method

post方式和get方式的区别

XHR新增的事件

ProgressEvent

封装xhr请求方法

二、axios

优点

快速使用

请求方法

axios拦截器

axios取消请求接口

常用config配置

修改默认值

二、superagent

三、vue-resource

快速使用

vue-cli配置模拟假数据

接口调用方法

四、fetch

请求方法

fetch与jQuery.ajax()的不同

五、跨域

CORS（跨域资源共享）

JSONP(本质上是XHR，动态生成script标签)

利用proxy代理

你的赏识是我前进的动力