关于HarmonyOS的学习

day35

一、回调地狱

    // 比如我们发送三个 ajax 请求
    // - 第一个正常发送
    // - 第二个请求需要第一个请求的结果中的某一个值作为参数
    // - 第三个请求需要第二个请求的结果中的某一个值作为参数
    ajax_get({
        url: 'http://localhost:2402/user/test1',
        success(res){
            console.log('这是第一个请求的结果：', res)
            ajax_get({
                url: 'http://localhost:2402/user/test2',
                params: {a: res},
                success(res2){
                    console.log('这是第二个请求的结果：', res2)
                    ajax_get({
                        url: 'http://localhost:2402/user/test3',
                        params: {b: res2},
                        success(res3){
                            console.log('这是第三个请求的结果：', res3)
                        }
                    })
                }
            })
        }
    })

二、Promise（解决回调地狱）

        + 承诺的意思
        + 作用
          => Promise主要是用来解决回调地狱的问题
        + 使用
          => new Promise()
        + 参数
          => 回调函数
        + 回调函数参数
          => resolve 表示成功时的函数
          => reject 表示失败时的函数
        + resolve函数执行
          => 对应的then()函数会执行
        + reject函数执行
          => 对应的catch()函数会执行
        + 注意点
          => resolve函数或者reject函数执行要根据具体的条件来进行判断的，不能两个一起执行
          => finally()方法无论成功还是失败都会执行
          => 一个方法后面点上另一个方法，把这种语法称之为链式调用
        + Promise三种状态
          => pending表示承诺进行时状态
          => fulfilled表示成功时状态
          => rejected表示失败时状态，失败时的状态需要手动抛出一个失败的静态方法

    let p = new Promise((resolve, reject)=>{
        // resolve('张')
        reject()
    })
    .then((name)=>{
        console.log(name, '承诺兑现了')
    })
    .catch(()=>{
        console.log('承诺失败')
        return Promise.reject()
    })
    .finally(()=>{
        console.log('你看我执行了没有')
    })
    console.log(p)

2.Promise的封装

    pAjax({url: 'http://localhost:2402/user/test1'})
    .then(res=>{
        console.log('这是第一个请求的结果：', res)
        return pAjax({url: 'http://localhost:2402/user/test2', params: {a: res}})
    })
    .then(res2=>{
        console.log('这是第一个请求的结果：', res2)
        return pAjax({url: 'http://localhost:2402/user/test3', params: {b: res2}})
    })
    .then(res3=>{
        console.log('这是第一个请求的结果：', res3)
    })

3.Promise静态方法

    // Promise.all() 所有的异步请求完成才执行的方法
    let result1 = service.get('/user/request1')
    let result2 = service.get('/user/request2')
    // Promise.all([result1, result2]).then(res=>{
    //     console.log(res)
    // })
​
    // Promise.race() 那个请求先回来就使用那个
    Promise.race([result1, result2]).then(res=>{
        console.log(res)
    })

三、asyn和await（回调地狱的终极解决方案，可以让代码写起来更为的优雅）

    async function fn(){
        let res = await pAjax({url: 'http://localhost:2402/user/test1'})
        console.log(res)
        let res2 = await pAjax({url: 'http://localhost:2402/user/test2', params: {a: res}})
        console.log(res2)
        let res3 = await pAjax({url: 'http://localhost:2402/user/test3', params: {b: res2}})
        console.log(res3)
    }
    fn()

四、axios

    axios.create()返回的是一个单例模式
    baseURL表示的是基准地址
    timeout表示请求超时时间（你自己规定请求如果超过多长时间没有回来，就超时）
    headers表示设置的请求头

1.添加请求拦截器

    service.interceptors.request.use(function (config) {
        // 在发送请求之前做些什么
        // 一般会在请求拦截器这里携带token
        let token = 'abc123'
        // 如果存在token信息，那么就发送请求的时候携带给后端
        if(token){
            config.headers = {'authorization': token}
        }
        // 注意点：如果不return config那么请求不会放行
        return config;
    }, function (error) {
        // 对请求错误做些什么
        return Promise.reject(error);
    });

2.添加相应拦截器

    service.interceptors.response.use(function (response) {
        // 2xx 范围内的状态码都会触发该函数。
        // 对响应数据做点什么
        return response.data;
    }, function (error) {
        // 超出 2xx 范围的状态码都会触发该函数。
        // 对响应错误做点什么
        return Promise.reject(error);
    });

五、try和catch

try catch 用来处理异常，把可能出问题的代码放在try里面，一般是吧请求放在try里面，因为请求如果由于某些原因报错了，不会影响后续代码的执行

    try{
        const a = 10
        a = 20
    }catch{
        console.log('hello')
    }

能在后头抛出一个错误，但不会影响后续代码

    console.error('哈哈，你出错了')
    console.log('我是张，大聪明！')

在后台抛出一个错误，会影响后续代码

    throw Error('哈哈')
    console.log('我是张，大聪明！')

六、链式调用原理

    function Person(name){
        this.name = name
    }
    Person.prototype.say = function(){
        console.log(this.name + '喜欢演讲！')
        return this
    }
    Person.prototype.play = function(){
        console.log(this.name + '喜欢晚上去公园里偶遇！')
    }
​
    new Person('张')
    .say()
    .play()