axios

最新推荐文章于 2024-06-13 02:48:16 发布

zhaoshy_fighting

最新推荐文章于 2024-06-13 02:48:16 发布

阅读量970

点赞数 8

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/zhaoshy_fighting/article/details/138445880

版权

json-server 快速搭建http服务

json-server包快速搭建http服务

axios

axios特征

axios定义

axios 就是一个建立在HTTP客户端的Promise对象用于浏览器和nodejs发送Ajax请求

browser 端发送AJax请求

Nodejs端发送http请求

支持PromiseAPI

请求响应拦截器

对请求和响应数据做转换

取消请求

自动将结果转化为JSON数据

做保护阻挡跨站攻击

axios安装

npm install axios

npm uninstall axios

axios基础设置

axios常用属性：method url data请求体

get请求：得到post/2 的数据信息

因为axios返回结果是一个Promise对象所以其后可以跟

.then 指定成功的回调

post发送：上传一份post数据

put请求：进行数据更新

delete：删除数据

 buts[0].onclick=function(){
            //发送axios   put请求
            axios({
                method:'get',
                url:'http://localhost:3000/post/2',

            }).then(response=>{
                console.log(response);
            });
        }
        buts[1].onclick=function(){
            //发送axios      post请求
            axios({
                method:'post',
                url:'http://localhost:3000/post',
                //设置响应体
                data:{
                    'title':"你好中国",
                    'author':"赵四"
                }

            }).then(response=>{
                console.log(response);
            });
            
        }
        buts[2].onclick=function(){
            //发送axios    put请求
            axios({
                method:'put',
                url:'http://localhost:3000/post/2',
                //put修改数据
                data:{
                  
                    author:"张三"
                }

            }).then(response=>{
                console.log(response);
            });
            
        }
        buts[3].onclick=function(){
            //发送axios  delete请求
            axios({
                method:'delete',
                url:'http://localhost:3000/post/7c59',

            }).then(response=>{
                console.log(response);
            });
            
        }

axios其他使用方式（axios常用方法）

axios.request()

得到所有评论

axios.post()

添加评论

axios响应

response

response结果

config 配置对象

data 响应体

axios自动将服务器返回结果进行json解析，转成对象，方便对结果进行处理

headers 响应头信息

行头空行体

request 原生AJax请求对象

request属性所保存的就是当前AJax发送请求时所创建的AJax请求对象

status 响应状态码

statusText 响应状态字符串

axios请求对象

指axios在调用时所接受的参数对象

请求配置 | Axios中文文档 | Axios中文网 (axios-http.cn)

不单指axios请求对象的参数对象，还包括request post等他们当中都用到config配置对象

{

url:'',

method:'',

baseURL:'',

// `transformRequest` 允许在向服务器发送前，修改请求数据
        // 它只能用于 'PUT', 'POST' 和 'PATCH' 这几个请求方法
        // 数组中最后一个函数必须返回一个字符串，一个Buffer实例，ArrayBuffer，FormData，或         Stream
        // 你可以修改请求头。
        transformRequest: [function (data, headers) {
        // 对发送的 data 进行任意转换处理

        return data;
        }],

        // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
        transformResponse: [function (data) {
        // 对接收的 data 进行任意转换处理

        return data;
        }],

        //自定义请求头
        headers: {'X-Requested-With': 'XMLHttpRequest'},

        // `params` 是与请求一起发送的 URL 参数
        // 必须是一个简单对象或 URLSearchParams 对象
        params: {
        ID: 12345
        },