Axios 整理常用形式及涉及的参数

一、axios get请求

javascript 复制代码
//形如
axios.get(url[, config])
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });
//无 config 的情况下,
axios.get('https://api.example.com/data')
  .then(response => {
   // 处理响应
  }) .catch(error => {
   // 处理错误
  });
  1. url:即请求api 链接;
  2. , config\]:表示config 可有可无

javascript 复制代码
// An highlighted block
axios.get('https://api.example.com/data',{
	//传递的数据:方式二选一;
	//我们通过 `params` 对象传递了查询参数,
	//实际上请求的URL会变成 'https://api.example.com/data?username=test'。
	params:{
		"username":"test",
	},
	headers:{
		"Content-Type":"application/json",
	},
	timeout:1000,//请求超时设置
})
  .then(response => {
   // 处理响应
  }) .catch(error => {
   // 处理错误
  });

二、axios post

javascript 复制代码
//形如
axios.post(url,data[, config])
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });
//无 config 的情况下,
axios.post('https://api.example.com/data',{
	firstName: 'Fred',
    lastName: 'Flintstone'
})
  .then(response => {
   // 处理响应
  }) .catch(error => {
   // 处理错误
  });
  1. url:即请求api 链接;
  2. data:传递的参数,object { } 形式;
  3. , config\]:表示config 可有可无

javascript 复制代码
axios.post('https://api.example.com/data',data,{
	//传递的数据:方式二选一;
	data: {
   		 firstName: 'Fred'
 	},
	headers:{
		"Content-Type":"application/json",
	},
	timeout:1000,//请求超时设置
})
  .then(response => {
   // 处理响应
  }) .catch(error => {
   // 处理错误
  });

三、axios() 发起请求

javascript 复制代码
//形如
axios({
	//config内容 常用字段
	method:'get/post',//常用的
	url:'/data',
	baseURL: 'https://api.example.com',
	//params 用于 get 传参数
	params:{},
	//data 用于 post 传递参数
	data:{},
	headers:{},
	timeout:100,
	
})
  .then(response => {
   // 处理响应
  }) .catch(error => {
   // 处理错误
  });

四、axios 创建实例

相关推荐
X01动力装甲3 小时前
@scqilin/phone-ui 手机外观组件库
前端·javascript·ui·智能手机·数据可视化
野木香4 小时前
tdengine笔记
开发语言·前端·javascript
千码君20164 小时前
React Native:为什么带上version就会报错呢?
javascript·react native·react.js
讨厌吃蛋黄酥5 小时前
🔥 面试必考题:手写数组扁平化,5种方法全解析(附代码+图解)
前端·javascript·面试
麦当_5 小时前
Cloudflare Workers 环境下的数据库死锁问题及解决方案
javascript·数据库·后端
知识分享小能手6 小时前
React学习教程,从入门到精通,React 前后端交互技术详解(29)
前端·javascript·vue.js·学习·react.js·前端框架·react
天天进步20156 小时前
React Server Components详解:服务端渲染的新纪元
开发语言·前端·javascript
lvchaoq6 小时前
react的依赖项数组
前端·javascript·react.js
GeniuswongAir8 小时前
Flutter实现滑动页面停留吸附
前端·javascript·flutter
颜酱9 小时前
基于Antd的SchemaForm 的表单复杂配置
前端·javascript·ant design