vue-前后端交互-axios


目录



文章目录

  • 1、基本特性
  • 2、基本用法
  • 3、axios 常用API
  • 4、axios参数传递
  • 4.1、GET与DELETE请求方式
  • 4.2、POST和PUT请求方式
  • 5、axios响应数据
  • 5.1、响应结果的主要属性
  • 6、axios的全局配置
  • 6、axios拦截器
  • 6.1、请求拦截器
  • 6.2、响应拦截器
  • ***后记*** ：




内容


1、基本特性

axios是一个基于Promise用于浏览器和nodejs的HTTP客户端，它具有以下特征：

  • 支持浏览器和nodejs
  • 支持promise
  • 能拦截请求和响应
  • 自动转换JSON

2、基本用法

  • 格式
axios.get(baseUrl)
  			.then(ret => {
  			// data属性名是固定的，用于获取用于后去后台响应的数据
  				console.log(ret.data);
  			})
  • 示例代码2-1：
// 后台路由
  app.get('/adata', (req, res) => {
    res.send('Hello axios!')
  })
  
  // 前端代码
  <!DOCTYPE html>
  <html lang="en">
  <head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>axios</title>
  </head>
  <body>
  	<script src="../../node_modules/axios/dist/axios.js"></script>
  	<script>
  		const baseUrl = 'http://localhost:3000/adata'
  		axios.get(baseUrl)
  			.then(ret => {
  				console.log(ret.data);
  			})
  	</script>
  </body>
  </html>
  
  // 结果
  Hello axios!

3、axios 常用API

  • get：获取
  • post：添加
  • put：修改
  • delete：删除

4、axios参数传递

4.1、GET与DELETE请求方式

DELETE请求方式与GET类似，这里一GET方式讲解。

  • URL传参
axios.get(url?query) 传统URL
  axios.get(url/query) Restful
  • 示例代码4.1-1：
// 后台路由：
  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)
  })

  // 前端页面，省略其他本分（同上），只给出js代码

  const baseUrl = 'http://localhost:3000/axios'
  axios.get(baseUrl + '?id=122')
  	.then(ret => {
  		console.log(ret.data);
  	})

  axios.get(baseUrl + '/123')
  .then(ret => {
  	console.log(ret.data);

  // 结果
  axios get 传递参数122
  axios get (Restful) 传递参数123
  • params传参
axios.get(url, {
  	属性名1: 值1,
  	属性名2: 值2,
  	...
  })
  • 示例代码4.1-2：
// 后台路由
  app.get('/axios', (req, res) => {
    res.send('axios get 传递参数' + req.query.id)
  })
  // js代码
  axios.get(baseUrl, {
  			params: {
  				id: 124
  			}
  		})
  		.then(ret => {
  			console.log(ret.data);
  		})
  
  // 结果
  axios get 传递参数124

4.2、POST和PUT请求方式

PUT请求方式与POST类似，这里用POST方式讲解。

  • 通过选项传递参数（默认传递的是JSON数据）
axios.post(url, {
  			属性名1: 值1,
  			属性名2: 值2,
  			...
  		})
  • 示例代码4.2-1：
//后台路由
  app.post('/axios', (req, res) => {
    res.send('axios post 传递参数' + req.body.uname + '---' + req.body.pwd)
  })
  // 前端js
  const baseUrl = 'http://localhost:3000/axios'
  		 axios.post(baseUrl, {
  			params: {
  				uname: 'zhangsan',
  				pwd: '123'
  			}
  		})
  		.then(ret => {
  			console.log(ret.data);
  		})
  // 结果
  axios post 传递参数zhangsan---123
  • 通过URLSearchParams传递参数（application/x-www-form-encoded)
let params = new URLSearchParams()
  params.append('param1', 'value1')
  params.append('param2', 'value2')
  axios.post(url,params)
  • 示例代码4.2-2：
// 后台路由同上
  // 前端js
  let params = new URLSearchParams()
  		params.append('uname', 'zhangsna')
  		params.append('pwd', '123')
  		axios.post(baseUrl, params)
  			.then(ret => {
  				console.log(ret.data);
  			})

  params = 'uname=zhangsan&pwd=123'
  axios.post(baseUrl, params, {
  	headers: {
  		'Content-Type': 'application/x-www-form-urlencoded'
  	}
  })
  	.then(ret => {
  		console.log(ret.data);
  	})

  //结果：
  axios post 传递参数zhangsan---123

5、axios响应数据

5.1、响应结果的主要属性

  • data：实际响应会的数据
  • header：响应头信息
  • status：响应状态码
  • statusText：响应状态码描述

6、axios的全局配置

常用配置如下：

  • axios.default.timeout = … // 设置超时时间，单位ms
  • axios.default.baseURL = … // 设置域名基本路径，请求的时候，直接拼接请求方法中的url
  • axios.default.hdears = {…} // 设置请求头信息

6、axios拦截器

6.1、请求拦截器

在发出请求之前，设置一些信息

  • 格式
axios.interceptors.request.use(functions(config) {
  	// 信息设置
  	return config
  }, function(err) {
  	// 处理响应的错误信息
  })

常用于登录信息的校验等。

  • 添加mytoken已登录信息示例代码6.1-1
axios.interceptors.request.use(functions(config) {
  			config.header.mytoken = 'user'
  			return config
  		}, function(err) {
  			// 处理响应的错误信息
  		})

6.2、响应拦截器

在获取数据之前，对数据做一些加工处理

  • 格式
axios.interceptors.response.use(function(ret) {
  	if(ret.status !== 200) {
  		// 其他处理
  	}
  	// 200直接返回实际数据
  	return ret.data
  	
  }, function(err) {
  	// 处理响应错误
  })
  • 如果响应200就直接获取数据

axios.interceptors.response.use(function(ret) {

return ret

}, function(err) {
// 处理响应错误
})