zoukankan      html  css  js  c++  java
  • 封装ajax---基于axios

    image

    <script>
            /* 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))
                        }
                    }
                })
            }
        </script>
  • 相关阅读:
    表单的编辑添加和删除 .removeClass() .append() .preAll() .attr('b') document.createElement()
    菜单与内容下拉jQuery
    s2选择框的全选和反选jQuery
    作用域
    当前触发事件的两种方式(onclick) 和 ('id') 获取
    词义分析
    Qt下载地址
    字符集(编码)转换_Qt532_QString
    字符集(编码)转换_Windows
    字符集(编码)转换_Linux
  • 原文地址:https://www.cnblogs.com/cl1998/p/13114538.html
Copyright © 2011-2022 走看看