• 封装一个基于axios的 Ajax


    /* index.js */
            /* GET请求 */
           function testGet() {
               axios({
                url:'http://localhost:3000/posts',
                method:'GET',
                params:{
                    id:2,
                    xxx:"abc"
                }
               }).then(response=>{
                   console.log(response);
                   
               },error=>{
                   console.log(error.message);
                   
               })
           }
           /* Post请求 */
           function testPost() {
               axios({
                   url:'http://localhost:3000/posts',
                   method:'POST',
                   data:{
                    "title": "json-server----","author": "typicode----"
                   }
               }).then(response=>{
                   console.log(response);
                   
               },error=>{
                   console.log(error.message);
               })
           }
           /* PUT请求 */
           function testPut() {
               axios({
                   url:'http://localhost:3000/posts/2',
                   method:'PUT',
                   data:{
                    "title": "json-server666","author": "typicode666"
                   }
               }).then(response=>{
                   console.log(response);
                   
               },error=>{
                   console.log(error.message);
               })
           }
           /* Delete请求 */
           function testDelete() {
               axios({
                   url:'http://localhost:3000/posts/6',
                   method:'DELETE',
                   data:{
                    "title": "json-server----","author": "typicode----"
                   }
               }).then(response=>{
                   console.log(response);
                   
               },error=>{
                   console.log(error.message);
               })
           }
    
           /* 封装一个ajax基于axios */
            function axios({
                url,
                method,
                params={},
                data={}
            }) {
                // 返回一个promise对象
                return new Promise((resolve,reject)=>{
    
                    // 处理method 转换为大写
                    method = method.toUpperCase()
    
                    let queryString = ''// 处理query参数(拼接到url上) id=1&xxx=abc
                    Object.keys(params).forEach(v=>{
                        queryString+=`${v}=${params[v]}&`
                    })
                    if(queryString){
                        queryString = queryString.substring(0,queryString.length-1)
                        url += '?' + queryString
                    }
    
                    // 1. 执行异步ajax请求
                    const request = new XMLHttpRequest()// 1.1. 创建xhr对象
                    request.open(method,url,true)// 1.2. 打开链接(初始化请求, 没有请求)
                    // 1.3. 发送请求
                    if(method==='GET'||method==='DELETE'){
                        request.send()
                    }else if(method==='POST'||method==='PUT'){
                        request.setRequestHeader('Content-Type','application/json;charset=utf-8')// 告诉服务器请求体的格式是json
                        request.send(JSON.stringify(data)) // 发送json格式请求体参数
                    }
                    // 1.4  绑定状态改变的监听
                    request.onreadystatechange = function(){
                        // 如果请求没有完成, 直接结束
                        if(request.readyState!==4){
                            return
                        }
                        // 如果响应状态码在[200,300)之间代表成功, 否则失败
                        const {status,statusText} = request
                        // 2.  如果调用成功了, 调用 resolve
                        if(status>=200 && status<=299){
                            // 准备结果数据对象response
                            const response = {
                                data:JSON.parse(request.response),// 响应体(装换为json格式)
                                status,// 响应状态码
                                statusText// 响应文本
                            }
                            resolve(response)
                        }else{ // 3.  如果调用失败了, 调用 reject
                            reject(new Error('request error status' + status))
                        }
                    }
                })
            }
  • 相关阅读:
    java中的 equals 与 ==
    String类的内存分配
    SVN用命令行更换本地副本IP地址
    npoi 设置单元格格式
    net core 微服务框架 Viper 调用链路追踪
    打不死的小强 .net core 微服务 快速开发框架 Viper 限流
    net core 微服务 快速开发框架 Viper 初体验20201017
    Anno 框架 增加缓存、限流策略、事件总线、支持 thrift grpc 作为底层传输
    net core 微服务 快速开发框架
    Viper 微服务框架 编写一个hello world 插件02
  • 原文地址:https://www.cnblogs.com/cl1998/p/13114572.html
Copyright © 2020-2023  润新知