您的位置:首页 > 移动开发 > IOS开发

axios请求总结

2020-07-13 04:59 1051 查看

axios是第三方封装库,作用是在框架中使用数据请求

文档说明地址:https://www.npmjs.com/package/axios

安装:

(1)npm

$ npm install axios –S

(2)CDN     

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

特点:

- 1. 它在浏览器中创建的是浏览器对象

- 2. 它底层是用Node.js中的http模块实现的

- 3. 支持Promise

- 4. 可以拦截请求和响应

      功能: loading加载效果、登录拦截

- 5. 转换请求和响应数据

- 6. 自动转换为JSON数据

- 7. 客户端支持防止XSRF 

- 8. axios会自动封装数据

 

使用:

一、模拟数据

1.Mock模拟数据的请求 

(1)mock.js生成(在mock 目录)

(2)线上拷贝

(3)线上的 http://jsonplaceholder.typicode.com/

2.后端接口的请求

后端渲染模板:https://www.showdoc.cc/

二、发送请求

(1)get请求

无参数:

axioa写在vue里面的methods下面的函数里

[code]    reg () {
axios({
url: ` `,
method: 'GET',//默认就是get请求,这个可以不写
params: {
a: 1,
b: 2
}
}).then( res => {
console.log( res )
}).catch( err => console.log( err ))
}

或者

[code]    axios.get('./mock/data/data.json')
.then( res => {
console.log( res )
})
.catch( err => console.log( err ))
}

 

有参数:

[code]   axios.get(`${ DEV_BACK_URL }/shop`,{
params: { //get请求携带参数
a: 1,
b: 2
}
}).then( res => {
console.log( res )
}).catch( error => console.log( error ))

get请求携带参数用params

(2)post请求

post请求必须先设置请求头

[code]    /* 统一设置post请求头 */
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
new Vue({

 

[code]  const p = new URLSearchParams() //得到参数携带对象
// p.append( 参数,参数值 )
p.append( 'username','张骏' )
p.append( 'password','123' )
p.append( 'name','骏哥' )
axios({
url: `${ DEV_BACK_URL }/register`,
data: p,// post请求携带参数的配置项
method: 'POST',
withCredentials: true,
}).then( res => console.log( res ))
.catch( err => console.log( err ))

post请求携带参数的用data,用p.append添加参数

 

三、封装

[code] /*
封装一下axios
! 它是一个函数,因为它要携带参数
*/

function request ({
url,
method = 'get' || 'GET',
headers,
params,
data,
baseURL,
auth,
withCredentials = false
}) {
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
// axios.defaults.headers.token = 'sdfsdfs'
axios.defaults.baseURL = baseURL
return new Promise(function ( resolve,reject ) {
console.log('method',method)
switch ( method ) {
case 'get' || 'GET':
axios({
url,
params,
}).then( res => resolve( res ))
.catch( err => reject( err ))
break;
case 'POST':
console.log('post - p')
const p = new URLSearchParams()
// data  {a:1,b:2}
if ( data ) {//data存在,那么我们才遍历,不存在,那么我们不遍历
for( let key in data ) {
p.append( key, data[ key ] )
}
}
axios({
url,
data: p,
method,
auth,//针对登录做判断,判断这个用户是普通用户还是超级管理员
withCredentials//这个请求是否具有跨源的凭证
}).then( res => resolve( res ))
.catch( err => reject( err ))
break;
case 'PUT':
axios({
url,
params,
method
}).then( res => resolve( res ))
.catch( err => reject( err ))
break;
case 'DELETE':
axios({
url,
params,
method
}).then( res => resolve( res ))
.catch( err => reject( err ))
break;

default:
break;
}
})
}

 

 

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: