视图层-pdd项目封装Ajax请求

最新推荐文章于 2024-08-15 09:50:46 发布

zhou-boy

最新推荐文章于 2024-08-15 09:50:46 发布

阅读量143

点赞数

分类专栏： pdd移动端仿制

本文链接：https://blog.csdn.net/qq_43632167/article/details/109698835

版权

pdd移动端仿制专栏收录该内容

12 篇文章 1 订阅

订阅专栏

该博客介绍了如何在Vue项目中利用axios库封装AJAX请求。首先通过npm安装axios，然后在api文件夹下创建ajax.js，导入axios并定义一个ajax函数，根据GET或POST请求类型进行不同的处理。在GET请求中，拼接参数并发送请求；在POST请求中直接发送。最后返回Promise处理请求结果，实现异步数据交互。

摘要由CSDN通过智能技术生成

封装AJAX

下载Ajax的axios库

npm install axios

新建ajax请求的JS文件

在项目目录下的api文件夹下新建ajax.js请求文件

api\ajax.js

ajax.js文件

ajax.js文件内的操作

//引入axios模块
import axios from 'axios'

export default function ajax(url = '',params = {},type = 'GET') {
  //1：定义promise对象
  let promise ;
  //请求成功返回的方法 resolve,请求失败返回的方法 reject
  return new Promise((resolve,reject)=> {
    //2：判断请求方式
    if('GET' === type){
      //2.1：拼接请求的字符串
      let paramsStr = '';
      Object.keys(promise).forEach(key => {
        paramsStr += key + '=' + params[key] +'&'
      });
      //2.2：最后一个字符 &
      if(paramsStr !== ''){
        //substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
        //lastIndexOf() 方法可返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找。
        paramsStr = paramsStr.substr(0,paramsStr.lastIndexOf('&'))
      }
      //2.3：完整路径
      url += '?' + paramsStr;
      //2.4：发送 GTE 请求
      promise = axios.get(url)
    }else if('POST' === type){
      //发送 POST 请求
      promise = axios.post(url,params);
    }
    //3：返回请求的结果
    promise.then((response) => {
      resolve(response.data);
    }).catch(error => {
      reject(error);
    })
  })
}