axios最原始的使用（待更新）

心已赠人 2023-01-23 14:48 52阅读 0赞

> There is always hope.  
> 希望永存。

*  axios官网：https://www.npmjs.com/package/axios

> 常见的响应状态码  
> 200          OK         请求成功。一般用于GET与POST请求；  
> 201          Created          已创建。成功请求并创建了新的资源；  
> 401          Unauthorized          未授权/请求要求用户的身份认证；  
> 404          Not Found          服务器无法根据客户端的请求找到资源；  
> 500          Internal Server Error          服务器内部错误，无法完成请求；

//get 请求
    function onQuery() { 
        /** * axios.get(a,b)分别代表： * 1.api请求url(地址); * 2.api所需参数，params:请求地址url上传递; */
        this.axios.get('http://greg-zhong.icu/hkc-payslip-housekeeper/valid/login',{ params:{ "page":1,"size":10}}
        ) .then((res)=> { //请求成功的回调，.then返回一个新的promise 注：res是response的缩写
                console.log("请求成功数据",res);
           })
           .catch((error)=> { //请求失败的回调;
                console.log("请求失败数据",error);
           })
    }

//post 请求
    function onLogin() { 
        /** * axios.post(a,b,c)分别代表： * 1.api请求url(地址); * 2.api所需参数，在请求体中传递; * 3.api所需参数，在请求地址url上传递; */
        this.axios.post('http://greg-zhong.icu/hkc-payslip-housekeeper/valid/login',{ "name":"zzw","age":22})
            .then((res)=> { //请求成功的回调，.then返回一个新的promise 注：res是response的缩写
                console.log("请求成功数据",res);
            })
            .catch((error)=> { //请求失败的回调;
                console.log("请求失败数据",error);
            })
    }

> 补充： get 请求不安全，参数暴露在地址栏、post请求相对安全，参数都是通过请求体传递的…

#### 写在最后 ####

> 请求头的设置~决定了以什么形式往服务器上传参

*  1. 设置urlencoded，则使用params传参，参数字段会拼接到url后面（安全性低），一般用于get 或 delete请求方式中；

> Content-Type : application/x-www-form-urlencoded  
> 例如：http://greg-zhong.icu/username=‘zzw’&password=‘admin’

*  2. 设置json格式（axios中的post请求方式，默认参数以json形式，传递给服务器），则参数以json格式在请求体中进行携带传递给~服务器（安全性高），一般用于post 或 put请求方式中；

> Content-Type : application/json  
> \{  
> “username”:“zzw”,  
> “password”:“admin”  
> \}

*  3. 文件上传的请求

> Content-Type : multipart/form-data