promise fetch axios

最新推荐文章于 2024-11-08 22:14:09 发布
最新推荐文章于 2024-11-08 22:14:09 发布
阅读量204 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hc3176/article/details/117397809
本文探讨了基于Promise的Ajax请求实现，包括发送顺序控制、错误处理、Fetch API的HTTP请求、参数传递，以及axios的简化用法。同时讲解了async/await的运用，使异步代码更易读。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

promise fetch axios

基于Promise发送Ajax

// 路由
app.get('/data', (req, res) => {
  res.send('Hello World!')
})

function queryData(url) {
  var p = new Promise(function (resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
      if (xhr.readyState != 4) return;
      if (xhr.readyState == 4 && xhr.status == 200) {
        // 处理正常的情况
        resolve(xhr.responseText);
      } else {
        // 处理异常情况
        reject('服务器错误');
      }
    };
    xhr.open('get', url);
    xhr.send(null);
  });
  return p;
}
queryData('http://localhost:3000/data')
  .then(function (data) {
    console.log(data);
  }, function (info) {
    console.log(info)
  });

基于Promise发送Ajax请求解决回调地狱

// 路由
app.get('/data', (req, res) => {
  res.send('Hello World!')
})
app.get('/data1', (req, res) => {
  setTimeout(function () {
    res.send('Hello TOM!')
  }, 1000);
})
app.get('/data2', (req, res) => {
  res.send('Hello JERRY!')
})


............基于Promise发送Ajax...............

// 发送多个ajax请求并且保证顺序
queryData('http://localhost:3000/data')
  .then(function(data){
    console.log(data)
    return queryData('http://localhost:3000/data1');
  })
  .then(function(data){
    console.log(data);
    return queryData('http://localhost:3000/data2');
  })
  .then(function(data){
    console.log(data)
  });

.then参数

............基于Promise发送Ajax...............


queryData('http://localhost:3000/data')
  .then(function(data){
    return queryData('http://localhost:3000/data1');
  })
  .then(function(data){
    return new Promise(function(resolve, reject){
      setTimeout(function(){
        resolve(123);
      },1000)
    });
  })
  .then(function(data){
    console.log(data)  //123
    return 'hello';
  })
  .then(function(data){
    console.log(data) //hello
  })

Promise 基本API

实例方法
.then()
  • 得到异步任务正确的结果
.catch()
  • 获取异常信息
.finally()
  • 成功与否都会执行（不是正式标准
 /*
   Promise常用API-实例方法
 */
 // console.dir(Promise);
 function foo() {
   return new Promise(function (resolve, reject) {
     setTimeout(function () {
       // resolve(123);
       reject('error');
     }, 100);
   })
 }
 foo()
   .then(function (data) {
     console.log(data)   //123
   })
   .catch(function (data) {
     console.log(data)   //error
   })
   .finally(function () {
     console.log('finished')   //finished
   });
   
 // --------------------------
 // 两种写法是等效的
 // foo()
 //   .then(function (data) {
 //     console.log(data)   //123
 //   }, function (data) {
 //     console.log(data)  //error
 //   })
 //   .finally(function () {
 //     console.log('finished') //finished
 //   });
静态方法
.all()
  • Promise.all方法接受一个数组作参数，数组中的对象（p1、p2、p3）均为promise实例（如果不是一个promise，该项会被用Promise.resolve转换为一个promise)。它的状态由这三个promise实例决定
.race()
  • Promise.race方法同样接受一个数组作参数。当p1, p2, p3中有一个实例的状态发生改变（变为fulfilled或rejected），p的状态就跟着改变。并把第一个改变状态的promise的返回值，传给p的回调函数
app.get('/a1', (req, res) => {
  setTimeout(function () {
    res.send('Hello TOM!')
  }, 1000);
})
app.get('/a2', (req, res) => {
  setTimeout(function () {
    res.send('Hello JERRY!')
  }, 2000);
})
app.get('/a3', (req, res) => {
  setTimeout(function () {
    res.send('Hello SPIKE!')
  }, 3000);
})

............基于Promise发送Ajax...............
 
 
 var p1 = queryData('http://localhost:3000/a1');
 var p2 = queryData('http://localhost:3000/a2');
 var p3 = queryData('http://localhost:3000/a3');
 
 Promise.all([p1, p2, p3]).then(function (result) {
   console.log(result)  //["Hello TOM!", "Hello JERRY!", "Hello SPIKE!"]
 })
 
 // Promise.race([p1,p2,p3]).then(function(result){
 //   console.log(result)  //Hello TOM!
 // })

fetch API 中的 HTTP 请求

  • fetch(url, options).then(）
  • HTTP协议，它给我们提供了很多的方法，如POST，GET，DELETE，UPDATE，PATCH和PUT
    • 默认的是 GET 请求
    • 需要在 options 对象中 指定对应的 method method:请求使用的方法
    • post 和 普通 请求的时候 需要在options 中 设置 请求头 headers 和 body

Fetch API 基本用法

app.get('/fdata', (req, res) => {
  res.send('Hello Fetch!')
})

fetch('http://localhost:3000/fdata').then(function(data){
   // text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据
   return data.text();
 }).then(function(data){
   console.log(data);  //Hello Fetch!
 })

Fetch API 调用接口传递参数

后台

// 设置允许跨域访问该服务
app.all('*', function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
  res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type,mytoken");
  next();
});

app.get('/books', (req, res) => {
  res.send('传统的URL传递参数!' + req.query.id)
})
app.get('/books/:id', (req, res) => {
  res.send('Restful形式的URL传递参数!' + req.params.id)
})
app.delete('/books/:id', (req, res) => {
  res.send('DELETE请求传递参数!' + req.params.id)
})
app.post('/books', (req, res) => {
  res.send('POST请求传递参数!' + req.body.uname + '---' + req.body.pwd)
})
app.put('/books/:id', (req, res) => {
  res.send('PUT请求传递参数!' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
})

    // app.get('/books', (req, res) => {
    //   res.send('传统的URL传递参数!' + req.query.id)
    // })
    // app.get('/books/:id', (req, res) => {
    //   res.send('Restful形式的URL传递参数!' + req.params.id)
    // })
    // app.delete('/books/:id', (req, res) => {
    //   res.send('DELETE请求传递参数!' + req.params.id)
    // })
    // app.post('/books', (req, res) => {
    //   res.send('POST请求传递参数!' + req.body.uname + '---' + req.body.pwd)
    // })
    // app.put('/books/:id', (req, res) => {
    //   res.send('PUT请求传递参数!' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
    // })


    // GET参数传递-传统URL
    // fetch('http://localhost:3000/books?id=123', {
    //   method: 'get'
    // })
    //   .then(function (data) {
    //     return data.text();
    //   }).then(function (data) {
    //     console.log(data) //08-FetchAPI参数传递.html:35 传统的URL传递参数!123
    //   });

    // GET参数传递-restful形式的URL
    // fetch('http://localhost:3000/books/456', {
    //   method: 'get'
    // })
    //   .then(function (data) {
    //     return data.text();
    //   }).then(function (data) {
    //     console.log(data)   //Restful形式的URL传递参数!456
    //   });

    // DELETE请求方式参数传递
    // fetch('http://localhost:3000/books/789', {
    //   method: 'delete'
    // })
    //   .then(function (data) {
    //     return data.text();
    //   }).then(function (data) {
    //     console.log(data)   //DELETE请求传递参数!789
    //   });

    // POST请求传参
    // fetch('http://localhost:3000/books', {
    //   method: 'post',
    //   body: 'uname=lisi&pwd=123',
    //   headers: {
    //     'Content-Type': 'application/x-www-form-urlencoded'
    //   }
    // })
    //   .then(function (data) {
    //     return data.text();
    //   }).then(function (data) {
    //     console.log(data)  //POST请求传递参数!lisi---123
    //   });

    // POST请求传参   有问题将跨域拦截写到一行上
    // fetch('http://localhost:3000/books', {
    //   method: 'post',
    //   body: JSON.stringify({
    //     uname: '张三',
    //     pwd: '456'
    //   }),
    //   headers: {
    //     'Content-Type': 'application/json'
    //   }
    // })
    //   .then(function (data) {
    //     return data.text();
    //   }).then(function (data) {
    //     console.log(data)    //POST请求传递参数!张三---456
    //   });

    // // PUT请求传参
    fetch('http://localhost:3000/books/123', {
      method: 'put',
      body: JSON.stringify({
        uname: '张三',
        pwd: '789'
      }),
      headers: {
        'Content-Type': 'application/json'
      }
    })
      .then(function (data) {
        return data.text();
      }).then(function (data) {
        console.log(data) //PUT请求传递参数!123---张三---789
      });

Fetch响应结果的数据格式

app.get('/json', (req, res) => {
  res.json({
    uname: 'lisi',
    age: 13,
    gender: 'male'
  });
})

fetch('http://localhost:3000/json').then(function(data){
  // return data.json();
  return data.text();
}).then(function(data){
  // console.log(data.uname)
  // console.log(typeof data)
  var obj = JSON.parse(data);
  console.log(obj.uname,obj.age,obj.gender)  //lisi 13 male
})

axios基本使用

基本使用

app.get('/adata', (req, res) => {
  res.send('Hello axios!')
})

 axios.get('http://localhost:3000/adata').then(function (ret) {
   // 注意data属性是固定的用法，用于获取后台的实际数据
   console.log(ret.data)   //Hello axios!
   console.log(ret)
 })

axios请求参数

后台

app.get('/axios', (req, res) => {
  res.send('axios get 传递参数' + req.query.id)
})
app.get('/axios/:id', (req, res) => {
  res.send('axios get (Restful) 传递参数' + req.params.id)
})
app.delete('/axios', (req, res) => {
  res.send('axios get 传递参数' + req.query.id)
})
app.post('/axios', (req, res) => {
  res.send('axios post 传递参数' + req.body.uname + '---' + req.body.pwd)
})
app.put('/axios/:id', (req, res) => {
  res.send('axios put 传递参数' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
})

    // axios get请求传参
    // axios.get('http://localhost:3000/axios?id=123').then(function (ret) {
    //   console.log(ret.data)   //axios get 传递参数123
    // })

    // axios.get('http://localhost:3000/axios/123').then(function (ret) {
    //   console.log(ret.data)   //axios get (Restful) 传递参数123
    // })
    // axios.get('http://localhost:3000/axios', {
    //   params: {
    //     id: 789 
    //   }
    // }).then(function (ret) {
    //   console.log(ret.data)   //axios get 传递参数789
    // })

    // axios delete 请求传参
    // axios.delete('http://localhost:3000/axios', {
    //   params: {
    //     id: 111
    //   }
    // }).then(function (ret) {
    //   console.log(ret.data)   //axios get 传递参数111
    // })

    // axios.post('http://localhost:3000/axios', {
    //   uname: 'lisi',
    //   pwd: 123
    // }).then(function (ret) {
    //   console.log(ret.data) //axios post 传递参数lisi---123
    // })
    // var params = new URLSearchParams();
    // params.append('uname', 'zhangsan');
    // params.append('pwd', '111');
    // axios.post('http://localhost:3000/axios', params).then(function (ret) {
    //   console.log(ret.data)   //axios post 传递参数zhangsan---111
    // })

    // axios put 请求传参
    axios.put('http://localhost:3000/axios/123', {
      uname: 'lisi',
      pwd: 123
    }).then(function (ret) {
      console.log(ret.data)   //axios put 传递参数123---lisi---123
    })

axios 响应结果与全局配置

app.get('/axios-json', (req, res) => {
  res.json({
    uname: 'lisi',
    age: 12
  });
})

axios.get('http://localhost:3000/axios-json').then(function (ret) {
      console.log(ret.data.uname)   //LISI
    })


    // 配置请求的基准URL地址
    axios.defaults.baseURL = 'http://localhost:3000/';
    // 配置请求头信息
    axios.defaults.headers['mytoken'] = 'hello';
    axios.get('axios-json').then(function (ret) {
      console.log(ret.data.uname)   //LISI
    })

axios拦截器

	# 1. 请求拦截器 
	axios.interceptors.request.use(function(config) {
      console.log(config.url)	//http://localhost:3000/adata
      # 1.1  任何请求都会经过这一步   在发送请求之前做些什么   
      config.headers.mytoken = 'nihao';
      # 1.2  这里一定要return   否则配置不成功  
      return config;
    }, function(err){
       #1.3 对请求错误做点什么    
      console.log(err)
    })
	#2. 响应拦截器 
    axios.interceptors.response.use(function(res) {
      #2.1  在接收响应做些什么  
      var data = res.data;
      return data;
    }, function(err){
      #2.2 对响应错误做点什么  
      console.log(err)
    })

async 和 await

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r2U01Ysw-1622355023575)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\1619175098660.png)]

  • async作为一个关键字放到函数前面
    • 任何一个async函数都会隐式返回一个promise
  • await关键字只能在使用async定义的函数中使用
    • ​ await后面可以直接跟一个 Promise实例对象
    • ​ await函数不能单独使用
  • async/await 让异步代码看起来、表现起来更像同步代码
 	# 1.  async 基础用法
    # 1.1 async作为一个关键字放到函数前面
	async function queryData() {
      # 1.2 await关键字只能在使用async定义的函数中使用      await后面可以直接跟一个 Promise实例对象
      var ret = await new Promise(function(resolve, reject){
        setTimeout(function(){
          resolve('nihao')
        },1000);
      })
      // console.log(ret.data)
      return ret;
    }
	# 1.3 任何一个async函数都会隐式返回一个promise   我们可以使用then 进行链式编程
    queryData().then(function(data){
      console.log(data)
    })

	#2.  async    函数处理多个异步函数
    axios.defaults.baseURL = 'http://localhost:3000';

    async function queryData() {
      # 2.1  添加await之后 当前的await 返回结果之后才会执行后面的代码   
      
      var info = await axios.get('async1');
      #2.2  让异步代码看起来、表现起来更像同步代码
      var ret = await axios.get('async2?info=' + info.data);
      return ret.data;
    }

    queryData().then(function(data){
      console.log(data)
    })

)
return ret;
}
# 1.3 任何一个async函数都会隐式返回一个promise 我们可以使用then 进行链式编程
queryData().then(function(data){
console.log(data)
})

#2.  async    函数处理多个异步函数
axios.defaults.baseURL = 'http://localhost:3000';

async function queryData() {
  # 2.1  添加await之后 当前的await 返回结果之后才会执行后面的代码   
  
  var info = await axios.get('async1');
  #2.2  让异步代码看起来、表现起来更像同步代码
  var ret = await axios.get('async2?info=' + info.data);
  return ret.data;
}

queryData().then(function(data){
  console.log(data)
})


###
前端：一篇彻底搞懂基于PROMISE的使用(AJAX,FETCH,AXIOS,ASYNC/AWAIT)
GIS摆渡人
04-29 592
文章目录一 PROMISE用法PromisePromise的相关概念基于promise发送ajax请求promise常用的API二 接口调用 FETCH 用法基本特性GET请求DELETE 请求POST请求 传统参数三 接口调用 AXIOS 用法基本特性:axios常用APIGET传递参数POST传递参数四 接口调用 ASYNC/AWAIT 用法 一 PROMISE用法 Promise resolve成功状态 reject拒绝状态 then是前面返回promise的处理 Promise的相关概念 es6新语
Vue 接口异步 Promise fetch axios
qq_38232003的博客
08-26 402
接口调用方式 原生ajax 基于jQuery的ajax fetch axios 异步 JavaScript的执行环境是「单线程」 所谓单线程，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个，它会「阻塞」其他任务。这个任务可称为主线程 异步模式可以一起执行多个任务 JS中常见的异步调用 定时任何 ajax 事件函数 promise 主要解决异步深层嵌套的问题 promise 提供了简洁的API 使得异步操作更加容
Vue基础（五）——前后端交互
雨的印记的博客
11-26 379
1. 前后端交互概述与URL地址格式 接口调用的方式有哪些 原生ajax 基于jQuery的ajax Fetch Promise url 地址格式有哪些 传统的url Restful形式的url 2. 异步编程问题与Promise概述 2.1 异步调用 异步效果分析 定时任务 Ajax 事件函数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
【JavaScript】网络请求之Promise fetch Axios及异步处理
Gavin_915的博客
11-08 562
Promise 表示承诺在未来的某个时刻可能会完成并返回结果，对于某些需要时间来处理结果的操作, 如用户登录、读取文件等, 可以使用 Promise 对象来执行异步操作Promise 对象有三种状态 pending(待处理)、fulfilled(已履行)、rejected(被驳回)。注：异步操作是指在程序执行过程中, 某个操作不会立即返回结果, 而是需要一段时间的等待。
前后端数据交互ajax，涉及跨域问题，promise，fetch，axios(常用)（二）
qq_40088973的博客
04-15 401
与上一篇文章连接。 四、数据处理 从上面 jquery 的 ajax 来看，ajax 并不是难题，其实需要我们花心思的是数据处理，你拿到数据，想执行什么，想让数据怎么展示，就需要前端好好处理。 数据处理是很重要的部分，各种遍历，各种取值，不要出错。 五、跨域 跨域：当你访问一个网址（不是你本地网址 如：localhost），你不能从当前域，不能访问别人的域。 为什么会有跨域问题？因为安全问题。仔...
干货分享：Axios vs. Fetch API，你该选哪个？
前端达人
07-28 2928
在前端开发中，与远程服务器无缝互动并通过网络交换数据是必不可少的一环。不论是从API获取数据、执行CRUD操作，还是处理其他网络相关任务，HTTP请求的重要性不言而喻。为了让开发者更轻松地处理HTTP请求，JavaScript社区中诞生了两个非常流行的库：Axios和Fetch。那么，究竟哪个工具更适合你的项目需求呢？今天，我们就来深度解析Axios和Fetch的优缺点，看看它们在不同任务中的表现...
异步与Promise与axios
一颗坚果的随便写写
02-18 2331
1.异步与Promise 众所周知JavaScript是一种单线程的语言，因此能像Java一样多线程运行，所以促使了JavaScript需要使用异步回调来完成一些逻辑。 JavaScript中最典型的异步就是ajax请求数据以及setTimeout setInterval两个定时方法，而在ES6中正式规范了Promise，主流浏览器现在也大多支持ES6，因此Promise也成了主流的异步解决方...
Axios vs Fetch：哪种网络请求工具在 Vue 项目中更胜一筹？
Caleb的博客
08-17 2345
axios是一个基于 Promise 的 HTTP 客户端，能够在浏览器和 Node.js 中使用。它的 API 简洁易用，支持各种 HTTP 请求方法，并提供了许多实用功能，如自动转换 JSON 数据、拦截器、取消请求等。这些特性使axios成为 Vue 开发者的首选网络请求工具。
React 开发（十六）：与 API 交互 - 使用 Fetch 和 Axios 获取数据
一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。
11-06 1483
Fetch是一个原生 JavaScript API，提供了一个基于 Promise 的方式来进行 HTTP 请求。它简单易用，并且是现代浏览器的标准功能。优点：无需额外引入第三方库，广泛支持于现代浏览器。缺点：不支持请求超时、取消请求等高级功能，错误处理相对简单。Fetch和Axios都可以用于与 API 进行交互，选择其中一个取决于你的需求。Fetch是原生 JavaScript API，适合简单的 API 请求，使用时需要手动处理一些功能。Axios。
ajax fetch axios
04-27
Axios是一个使用Promise基于XMLHttpRequest和fetch进行HTTP请求的JavaScript库。它具有更加直观和简洁的API，对于错误处理、取消请求等方面也有更好的表现。Axios也有一些其他的特性，如请求和响应的拦截器、默认的...
vue前后端交互（Promise、fetch、axios、async/await）
LFLZBZM的博客
05-09 475
前后端交互模式 1.接口调用方式 原生ajax 基于jQuery的ajax fetch axios 2.URL (1)传统的URL 协议://域名或IP地址:端口号/路径?参数#锚点 (2)Restful形式的URL HTTP请求方式： get 查询 post 添加 put 修改 delete 删除 Promise 概述 Promise是异步编程的一种解决方案， 从语法上讲，Promise是一个对象，从它可以获取异步操作的消息。 使用Promise的好处 可以避免回调地狱（多层异步调用嵌套问题） P
前后端交互（Promise、fetch、axios、async/awit用法）
WaNgLu:)的博客
02-02 855
1.Promise概述 Promise是异步编程的一种解决方案，从语法上讲，Promise是一个对象，从它可以获取异步操作的消息。 1.2Promise的好处： 1.2.1. 可以避免多层异步调用嵌套的问题（回调地狱） 1.2.2. Promise对象提供了简洁的API，使得控制异步操作更加容易。 1.3Promise的基本使用 var p = new Promise(funct...
前端系列-4 promise与async/await与fetch/axios使用方式
shengyu
05-12 3666
本文介绍promise使用方式，以及以Promise为基础的async/await用法和fetch/axios使用方式，主要以案例的方式进行。 javascript是单线程执行的，异步编程的本质是事件机制和函数回调。当执行阻塞任务或者进行IO操作时，编程时很容易嵌套多层回调，严重影响可读性和维护性，陷入地狱回调
数据交互——Promise、Ajax、axios和fetch的优缺点
qq_44905636的博客
04-13 1908
一、Promise Promise主要用于解决异步回调嵌套的问题。 当多个ajax请求之间存在依赖关系，也就是说一个请求必须使用另一个请求返回的结果时，需要将这个请求嵌套在另一个请求的回调函数上，才能使用另一个请求的结果来发送这个请求。 Promise的思路是将异步请求作为一个对象，将执行成功和失败作为这个对象的方法，执行成功的时候将结果放到这个对象的then方法中处理后续的逻辑，失败调用catc...
fetch的使用:拳打axios、脚踢ajax
coder的博客
07-23 815
如果你是一名对未来开发趋势有所了解的开发者，那么你一定知道，前后端分离的趋势。 现在的web体系中包含这么一项技术，那就是异步请求。在我眼中比较旧的技术体系中，使用的还是通过模板引擎来生产页面，简单来说类似于asp,jsp那一类,无不例外使用了模板引擎。 在这种开发模式中，前端的网页要是涉及到后端数据的话，那么百分之百会将页面丢到后端开发者，后端开发者将页面修改为模板，以适应对模板开发的要求。这就有几率触发发生前端与后端开发者之间矛盾，造成对整个团队的开发效率下降。当然，如果团队管理者分发任务得当，工作分工
Axios 与 Fetch 的区别
m0_55734628的博客
08-26 2693
Fetch可以实现所有Axios能够实现的功能，但是需要自行进行封装，如果不喜欢折腾直接在项目中使用Axios是一个非常明智的选择，这完全取决于你是否愿意使用浏览器内置API。
Promise相关（ajax/fetch/axios）
Wu hao's blog
05-06 235
概念: Promise是异步编程的一种解决方案，从语义上讲，Promise是一对象。从它可以获取异步操作的消息;主要解决回调地狱问题。 异步调用 (JS层面): --->定时任务 --->Ajax --->时间函数 基础用法: -->实例化Promise对象，构造函数中传递函数，该函数用于处理异步任务; resolve和rejec...
fetch与axios的区别（fetch的真正用法）
热门推荐
zuggs_的博客
06-22 4万+
首先不得不吐槽一下fetch的response机制了，真的太麻烦了，当我快放弃的时候，才真正懂得怎么用 axios使用特别简单 axios("http://xxx/xxx.json？a=123'").then((r)=&gt;{     console.log(r)//这里的r是响应结果 }) 但是axios不支持jsonp就比较恶心了，不过我们可以引入jsonp模块，详细使用前面blog...
JavaScript全家桶之Promise 封装ajax，axios，fetch
前端大白话
08-24 1109
Promise 简述 1、Promise 是一种异步的解决方案 2、分为三个状态，进行中，已成功（resolve），已失败（rejected） 3、两种结果，从进行中到已成功，或者是从进行中到已失败 4、Promise是同步的...
promise async axios
最新发布
03-10
<think>好的，用户想了解在使用axios时如何处理异步操作和Promise。首先，我需要回忆一下axios的基本用法和它与Promise的关系。记得axios是基于Promise的HTTP客户端，所以它返回的是Promise对象，这意味着可以用.then()和.catch()来处理异步操作。 接下来，用户可能需要具体的例子，所以应该分步骤说明。首先是基本用法，展示如何用.then()处理响应，用.catch()处理错误。然后，可能需要更现代的async/await语法，这样代码更简洁。这里要注意说明async函数的使用，以及如何在try/catch块中捕获错误。 然后，用户可能想知道如何同时处理多个请求，比如使用Promise.all()来并行发送请求，并处理所有结果。这时候需要给出一个例子，比如同时获取用户数据和帖子数据，然后处理两者的结果。 接下来，可能需要讨论错误处理的细节，比如如何区分不同的错误类型，比如网络错误和HTTP状态码错误。还要提到取消请求的方法，比如使用CancelToken，这在需要取消重复或过时的请求时很有用。 还要考虑用户可能遇到的常见问题，比如在异步操作中如何处理顺序请求，也就是一个请求完成后发另一个请求的例子。这时候用async/await会更清晰。 最后，需要总结最佳实践，比如推荐使用async/await提高可读性，正确处理错误，取消不必要的请求，以及处理多个请求的方法。同时，要确保引用相关的资料，比如引用[1]关于async函数返回Promise的内容，引用[2]提到的Async函数简化代码的部分，以及引用[3]中的资源操作例子，可能和HTTP请求相关。 检查是否有遗漏的要点，比如axios的配置、拦截器，但用户的问题集中在异步处理和Promise，所以可能不需要深入拦截器的内容。确保示例代码正确，语法正确，比如使用模板字符串，箭头函数等。同时，注意用中文回答，符合用户要求的结构，分步骤和代码示例，最后生成相关问题。 现在组织内容，确保每个部分清晰，并且引用正确的位置。比如在讨论async函数时引用[^1]，在错误处理部分提到使用Async.Rejected的简化方法引用[^2]，在资源请求部分可能引用[^3]的例子，但axios和$resource不同，所以可能只在需要的时候引用。React的引用[^4]可能不太相关，可以忽略。 最后生成相关问题，考虑用户可能进一步的问题，比如错误处理的最佳实践、取消请求的方法、async/await的优势，以及多个请求的处理，确保问题覆盖用户可能的兴趣点。</think>### 如何在使用axios时处理异步操作和Promise #### 1. **理解axios与Promise的关系** axios是一个基于Promise的HTTP客户端，所有axios请求默认返回Promise对象。因此，可以通过Promise链式调用（`.then()`、`.catch()`）或`async/await`语法处理异步操作。 #### 2. **基本用法：Promise链式调用** ```javascript axios.get('https://api.example.com/data') .then(response => { console.log('请求成功:', response.data); }) .catch(error => { console.error('请求失败:', error); }); ``` #### 3. **使用async/await简化代码** 通过`async`函数包裹异步操作，用`await`等待Promise解决： ```javascript async function fetchData() { try { const response = await axios.get('https://api.example.com/data'); console.log('数据获取成功:', response.data); } catch (error) { console.error('错误:', error); } } fetchData(); ``` 异步函数返回Promise的特性与axios的兼容性良好[^1]。 #### 4. **并行处理多个请求** 使用`Promise.all()`并行执行多个请求： ```javascript async function fetchMultipleData() { try { const [userData, posts] = await Promise.all([ axios.get('https://api.example.com/user'), axios.get('https://api.example.com/posts') ]); console.log('用户数据:', userData.data, '帖子:', posts.data); } catch (error) { console.error('至少一个请求失败:', error); } } ``` #### 5. **错误处理细化** - **区分错误类型**： 检查错误是否为axios生成的`AxiosError`： ```javascript .catch(error => { if (axios.isAxiosError(error)) { console.log('HTTP错误状态码:', error.response?.status); } else { console.log('非HTTP错误:', error); } }); ``` - **全局错误拦截**： 通过axios拦截器统一处理错误： ```javascript axios.interceptors.response.use( response => response, error => { console.error('拦截到错误:', error); return Promise.reject(error); } ); ``` #### 6. **取消请求** 使用`CancelToken`或`AbortController`（Axios >=0.22.0）取消请求： ```javascript const controller = new AbortController(); axios.get('https://api.example.com/data', { signal: controller.signal }) .then(response => { /* ... */ }) .catch(error => { if (axios.isCancel(error)) { console.log('请求被取消:', error.message); } }); // 触发取消 controller.abort('用户取消了操作'); ``` #### 7. **顺序请求示例** 若需按顺序发送请求（如先获取用户ID，再获取用户详情）： ```javascript async function sequentialRequests() { const userIdResponse = await axios.get('/api/user-id'); const userDetail = await axios.get(`/api/user/${userIdResponse.data.id}`); console.log('用户详情:', userDetail.data); } ``` ### 最佳实践总结 1. **优先使用async/await**：提高代码可读性，减少嵌套[^2]。 2. **统一错误处理**：通过拦截器或`try/catch`集中管理错误。 3. **合理取消请求**：避免无效请求占用资源。 4. **并行与顺序结合**：根据场景选择`Promise.all`或顺序`await`。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值