16.axios的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="vue.min.js"></script>
    <script src="axios.min.js"></script>
    <script>
        new Vue({
            el:'#app',
            data: {
                
            },
            created() {
                this.getData();
            },
            methods: {
                getData() {
                    axios.get("data.json") //需要在同级目录下创建data.json
                         .then(response => {
                             console.log(response);
                         })
                         .catch(error => {
                             console.log(error);
                         });
                }
            }
        })
    </script>
</body>
</html>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1.import axios from 'axios'   2.const service = axios.create({   3.    baseURL: '', // url = base url + request url   4.})   5.   6.function request(url,method, params, data, success, failure){   7.   8.    return new Promise((resolve,reject)=>{   9.        service.request({   10.            url: store.getters.serverUrl+url,   11.            method: method,   12.            data: data,   13.            withCredentials: params.withCredentials === false ? false : true,   14.        }).then(res=>{   15.            if (res.statusCode == 200) {   16.                //成功   17.                if(res.data.error){   18.                    reject(res.data.error);   19.                }   20.                resolve(res.data.result);   21.            }else{   22.                reject(res);   23.            }   24.        }).catch(err=>{   25.            uni.showModal({   26.                title: '提示',   27.                showCancel:false,   28.                content: '服务请求失败:' + err.errMsg,   29.                success(res) {}   30.            });   31.            reject(err);   32.        })   33.    })   34.}   export default request 
05-27
这段代码是基于axios封装的一个request方法,用于进行网络请求。下面是代码的详细解释: 1. 引入axios库 ```javascript import axios from 'axios' ``` 2. 创建axios实例 ```javascript const service = axios.create({ baseURL: '', // url = base url + request url }) ``` 通过create方法创建一个axios实例,并设置了基础的URL。这里的baseURL可以设置为后台接口的基础路径。 3. 定义request方法 ```javascript function request(url, method, params, data, success, failure) { return new Promise((resolve, reject) => { ... }) } ``` request方法接收6个参数,分别是url、method、params、data、success、failure。其中url表示请求的URL地址,method表示请求的方法,params表示请求的参数,data表示请求的数据体,success表示请求成功的回调函数,failure表示请求失败的回调函数。该方法返回一个Promise对象。 4. 发送请求 ```javascript service.request({ url: store.getters.serverUrl + url, method: method, data: data, withCredentials: params.withCredentials === false ? false : true, }).then(res => { ... }).catch(err => { ... }) ``` 在request方法中,我们通过service.request方法发送请求。这里的service就是我们上面创建的axios实例。其中,我们传入了请求的URL、请求的方法、请求的数据体等参数。withCredentials表示请求是否携带cookie。发送请求后,我们通过then()方法来处理成功的回调函数,通过catch()方法来处理失败的回调函数。 5. 判断请求结果 ```javascript if (res.statusCode == 200) { // 成功 if (res.data.error) { reject(res.data.error); } resolve(res.data.result); } else { reject(res); } ``` 在成功的回调函数中,我们首先判断返回的状态码是否为200,如果是,则表示请求成功,我们继续判断结果中是否有错误信息。如果有,则通过reject()方法返回错误信息;如果没有,则通过resolve()方法返回结果值。如果返回的状态码不为200,则表示请求失败,我们通过reject()方法返回失败信息。 以上就是这段代码的主要逻辑。需要注意的是,这里的代码中使用了ES6的语法,如箭头函数、解构赋值等。此外,这里使用了Promise对象来进行异步操作,需要熟悉Promise的基本用法。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值