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; } }) }
相关文章推荐
- ios 网络请求总结加强对中文的处理 问题:URL不允许写中文 在GET请求中,相关代码段打断点以验证。
- Android网络请求框架总结
- Vue axios post请求带参请求 详细教程
- 解决vue中 axios发起option请求的问题
- 请求、处理、相应的全程总结(包括页面生命周期)
- axios请求数据使用
- axios对请求各种异常情况处理的封装方法
- Servlet学习总结(10)----Servlet客户端HTTP请求常用方法
- 使用axios请求时,发送formData请求
- 由Ajax请求一般处理程序下载文件引发的问题后的一些总结
- 4.请求安全-- 结合使用的安全优势总结
- axios请求requestBody和formData
- Spring3 MVC请求参数获取的几种方法总结
- axios请求超时自动重新请求
- Axios 各种请求方式传递参数的格式
- 封装的axios请求,promise+async+await
- HTTP 笔记与总结(3 )socket 编程:发送 GET 请求
- 让axios发送表单请求形式的键值对post数据
- 关于跨域请求和django处理跨域请求最佳解决方案的总结