promise ~ async_html-js-css

promise

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 1.Promise代表的是一个异步 *** 作  它是构造函数 new Promise
        // 2.new Promise()时,要传递一个实参,这个实参是回调函数,这个函数会立即执行
        // 3.在回调函数中内部一般写的是异步代码
        // 4.Promise的原型上一些方法,这些方法是可以被实例调用 then catch  finally
        // then catch  finally 里面的回调函数都是事件循环eventloop的微任务
        // 5.then方法的第一个参数函数会传递给resolve,第二个参数函数会传递给reject

        // Promise的实例的状态
        // 1.等待 pending
        // 2.成功 fulfilled
        // 3.失败 rejected

        // let p = new Promise(function(resolve,reject){
            // console.log(123);
            // ...异步代码

            // 成功时:
            // resolve()

            // 失败时:
            // reject()
        // })
        // console.log(p);
        // p.then(function(){},function(){})
        // p.then(function(){}).catch(function(){})


        // 复习Promise的静态方法
        // 静态方法:将方法挂载到函数上,这个方法可以称为静态方法
        Promise.all()
        Promise.race()

        // Promise.reject()  => p = new Promise(function(resolve,reject){ reject() })
        // console.log(Promise.reject("失败1"));
        // console.log(new Promise(function(resolve,reject){ reject("失败2") }));
        let p = new Promise(function(resolve,reject){ 
            reject("失败2") 
        })
        p.catch(function(err){
            console.log(err);
        })


        // Promise.resolve() => new Promise(function(resolve,reject){ resolve() })

   

    </script>
</body>
</html>

async_await

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
    // async_await是解决异步终极解决方案
    // 语法: 声明异步函数
    // 异步函数返回值: 永远是Promise实例

    // 1.没有return   undefined 
    // 2.有return   普通数据
    // 3.有return   promise

    // async function test(){
    //   await 一般跟promise
    // }
    let p = new Promise(function(resolve,reject){
        resolve('成功')
    })

    async function test(){
        return p
    }
    // console.log(test())
    // console.log(test().then(function(res){console.log(res);}))
    console.log(test())

    </script>
</body>
</html>

解决跨域的三种方法

实现反向代理(发送ajax —>静态服务武器(浏览器)----->后台服务器)

配置理解
1.怎么实现
2.具体 *** 作简单理解 —>

 // before: require('./mock/mock-server.js')
    // 配置代理
    proxy: {
      // 请求时的路径中包含/api 就会走代理服务器 (可以显示多个)

      // 自己写的路径不跨域http://localhost:8888/api/sys/login
      // 真实的接口路径http://www.jd.com/api/sys/login

      // 自己写的路径不跨域http://localhost:8888/api/sys/login
      // 真实的接口路径http://www.jd.com/sys/login

      // http://localhost:8888/api/sys/login
      // =>http://www.jd.com/api/sys/login
      // =>http://www.jd.com/sys/login

      // 发现/api 后  将显示的前面地址替换为  target: 'http:/ww/jd.com'
      /*  '/api': {
        // target目标:真实接口服务器地址
        target: 'http:/ww/jd.com',
        // pathRewrite:路径重写
        pathRewrite: {
          '^/api': ''// 没有/api重新配置
        }

      } */

      // http://ihrm-java.itheima.net/api/sys/login
      '/api': {
        target: 'http://ihrm-java.itheima.net'
      }

    }

配置vue-cli的反向代理，实现后端接口的跨域访问**

import axios from 'axios'

import { Message } from 'element-ui'

// create an axios instance
// process.env当前进程的环境变量
const service = axios.create({
  // 设置请求根路径
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

/* // 创建了axios实例, 使用的是自己的配置项
const instance = axios.create({
  // 开发环境, 找 env.development, 找 VUE_APP_BASE_API 变量
  // 生产环境, 找 env.production,  找 VUE_APP_BASE_API 变量
  baseURL: process.env.VUE_APP_BASE_API, // 环境变量
  timeout: 5000 // request timeout
})

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1322140.html

promise ~ async

发表评论

评论列表（0条）