axios的接口调用

1 篇文章 0 订阅

1. axios的基本特性

axios(官网)是一个基于Promise用于浏览器和node.js的HTTP客户端。

它具有以下特征:

  • 支持浏览器和node.js
  • 支持promise
  • 能拦截请求和响应
  • 自动转换JSON数据

2. axios的基本用法

//引入axios.js
axios.get('/adata')
		.then(ret => {
		//data属性名称是固定的,用于获取后台响应的数据
		console.log(ret.data)
		})

3. axios的常用API

  • get:查询数据
  • post:添加数据
  • put:修改数据
  • delete:删除数据

GET

通过传统url传递参数:

axios.get('/adata?id=123')
	.then(ret => {
	console.log(ret.data)
     })
     //req.query.id

通过Restful形式的url传递参数:

axios.get('/adata/123')
	.then(ret => {
	console.log(ret.data)
     })
     //req.params.id

通过params选项传递参数:

axios.get('/adata',{
		params:{
		id:123
		}
	})
	.then(ret => {
	console.log(ret.data)
     })
     //req.query.id

DELETE

参数传递方式与get类似。
通过url传递参数:

axios.delete('/adata?id=123')
	.then(ret => {
		console.log(ret.data)
     })
     //req.query.id

通过Restful形式的url传递参数:

axios.delete('/adata/123')
	.then(ret => {
		console.log(ret.data)
     })
     //:id
     //req.params.id

通过params选项传递参数:

axios.delete('/adata',{
		params:{
		id:123
		}
	})
	.then(ret => {
		console.log(ret.data)
     })
     //req.query.id

POST

通过选项传递参数(默认传递的是json格式的数据)

axios.post('/adata',{
		uname:'tom',
		pwd:123
	})
	.then(ret => {
		console.log(ret.data)
     })
     //req.body.uname + '---' + req.body.pwd

通过URLSearchParams传递参数(application/x-www-form-urlencoded)

	const params = new URLSearchParams();
	params.append('param1','value1');
	params.append('param2','value2');
	axios.post('/api/test',params).then(ret => {
		console.log(ret.data)
		//req.body.uname + '---' + req.body.pwd
})

PUT

参数传递方式与post类似,也是两种格式都支持,一般使用json格式。

axios.put('/adata/123',{
		uname:'tom',
		pwd:123
	})
	.then(ret => {
		console.log(ret.data)
     })
     //:id
     //req.body.uname + '---' + req.body.pwd + '---' + req.body.id 

4. axios的响应结果

影响结果的主要属性

  • data:实际响应回来的数据
  • headers:响应头信息
  • status:响应状态码
  • statusText:响应状态信息
app.get('/axios-json',(req,res) => {
	//res.send('axios get 传递参数' + req.query.id)
	res.json({
		uname:'lisi',
		age:12
	})
	//前端ret.data.uname
})

5. axios的全局配置

axios.defaults.timeout = 3000; //超时时间
axios.defaults.baseURL = ‘http://localhost:3000/app’ //配置请求的基准URL地址,请求路径就可以简化操作
axios.defaults.headers[‘mytoken’] = ‘aqwerwqwerwqer2ewrwe23eresdf23’ //配置请求头信息

6. axios拦截器

6.1 请求拦截器
在请求发出之前设置一些信息

//添加一个请求拦截器
axios.interceptors.request.use(function(config){
	//在请求发出之前进行一些信息设置
	config.headers.mytoken = 'hello';
	return config;
},function(err){
	//处理相应的错误信息
	console.log(err)
})

6.1 响应拦截器
在获取数据之前对数据做一些加工处理

//添加一个响应拦截器
axios.interceptors.response.use(function(res){
	//在这里对返回数据做处理
	var data = res.data;
	return data;
	//return res;
},function(err){
	//处理相应的错误信息
	console.log(err)
})
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,在Vue项目中安装axios: ``` npm install axios --save ``` 然后,我们可以在src目录下创建一个utils目录,用于存放封装的axios请求相关的工具类。 在utils目录下,新建一个http.js文件,用于封装axios请求。 ```js import axios from 'axios' // 创建axios实例 const service = axios.create({ baseURL: process.env.BASE_API, // api的base_url timeout: 5000 // 请求超时时间 }) // request拦截器 service.interceptors.request.use(config => { // Do something before request is sent // ... return config }, error => { // Do something with request error console.log(error) // for debug Promise.reject(error) }) // respone拦截器 service.interceptors.response.use( response => { const res = response.data // 判断请求状态码 if (res.code !== 200) { // 这里可以根据后端返回的状态码进行统一的错误处理 console.log(res.message) return Promise.reject('error') } else { return response.data } }, error => { console.log('err' + error) // for debug return Promise.reject(error) } ) export default service ``` 在这个文件中我们封装了一个axios实例,并且设置了请求的超时时间,以及请求和响应的拦截器。 接下来,在utils目录下新建一个api.js文件,用于封装后端接口。 ```js import request from '@/utils/http' export function login(data) { return request({ url: '/login', method: 'post', data }) } export function getInfo(token) { return request({ url: '/user/info', method: 'get', params: { token } }) } export function logout() { return request({ url: '/logout', method: 'post' }) } ``` 在这个文件中,我们可以根据后端接口的定义,封装对应的请求方法,其中包括接口的URL、请求方法和请求参数。 最后,在Vue组件中使用这些封装好的API接口: ```js import { login } from '@/utils/api' export default { name: 'login', methods: { handleLogin() { login(this.form).then(response => { // 这里可以根据后端返回的数据进行相应的处理 console.log(response) }).catch(error => { // 这里可以根据后端返回的错误信息进行相应的处理 console.log(error) }) } } } ``` 在这个例子中,我们使用了login方法,在响应成功后,打印出了后端返回的数据。 通过这种方式,我们可以将后端接口进行统一的封装和管理,并且在Vue组件中可以方便的调用
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值