前端知识-4、前后端交互axios

最新推荐文章于 2024-07-22 06:34:29 发布

瓜牛强强

最新推荐文章于 2024-07-22 06:34:29 发布

阅读量1.3k

点赞数 2

分类专栏：前端知识文章标签：前端

本文链接：https://blog.csdn.net/weixin_44844572/article/details/121916060

版权

前端知识专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Axios 是一个基于 promise(异步实现) 的 HTTP 库，可以用在浏览器和 node.js 中使用，原生的js或者使用jquery来发生请求进行前后端数据交互，代码写起来过于复杂。官方文档地址：axios中文文档|axios中文网 | axios

1、安装axios

方式一：使用 npm安装:

npm install axios

方式二：直接通过script全局引用

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2、axios发送get请求

案例一：get请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<script type="text/javascript">
		
		//  使用axios发送get请求
		 var url = 'http://127.0.0.1:5000/api/projects'
		
		 var response = axios.get(url)
		 response.then(function(res){
		 	console.log('then方法 成功中输出的res:',res)
		 },function(res){
		 	console.log('then方法  失败中输出的res:',res)
		// 	 请求失败返回的是一个error对象，响应信息在error的response属性中
		 })
		
			
		</script>	
	</body>
</html>

案例二：get请求参数传递

使用axios发送get请求传递查询字符串参数，有如下两种方式

方式一：直接写在url地址中

const res =  axios.get('http://127.0.0.1:5000/api/pro_list?name=guaniu')

方式二：使用params进行传递

const res =  axios.get('http://127.0.0.1:5000/api/pro_list',
           {params: {"name":"guaniu"}}
          )

3、axios发送post请求

1、传递json格式的参数

axios.post('http://127.0.0.1:5000/api/user/login',
     {pwd: '123456',user: 'guniu'}
    )

2、传递表单类型的参数

// 构建一个表单参数对象
var params = new URLSearchParams();
params.append('user', 'guaniu');
params.append('pwd', '123456');
axios.post('http://127.0.0.1:5000/api/user/login', params)

4、全局的axios配置

1、配置基本的host地址

axios.defaults.baseURL ='https://api.example.com'

2、配置请求头信息

axios.defaults.headers.common['Authorization'] = 'Bearer '+ token

5、axios拦截器

1、请求拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // config为请求对象
  // 在发送请求之前
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

2、响应拦截器

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

6、async await的使用

如果你不喜欢通过then和catch这个回调的方式来获取数据，也只可以通过async 和await的方式来处理异步部分。

async function login() {
// 登录接口
  const userInfo = {
    username: 'guaniu',
    password: '123456'
 }
  const response = await axios.post('http://api.keyou.site:8000/user/login/',
userInfo)
  console.log(response)
}

注意点：await 和只能在通过async定义的函数中使用