实习小结 - Thu, Aug 27, 2020

欢迎阅读实习小结

Promise

主要解决回调地狱，状态pending resolved rejected

const newPromise = new Promise((resolve,reject) => {
    //pending阶段要做的事，同步执行
    //判断如何通向resovle或reject状态，从而异步执行resovle(data)或reject(error)
});
newPromise.then(
 (data) => {
        当newPromise的状态变成fulfilled后，该函数立即执行
        这里写通向fulfilled状态后要做的事情
    },
  (error) => {
        当newPromise的状态变成rejected后，该函数立即执行
        这里写通向rejected状态后要做的事情
    }
);

async

位于函数字面量或函数表达式的前面，被修饰函数执行后会返回一个promise对象

async function chloe(){
	console.log('chloe');
    return 20;
}
// ======== 等价于
function chloe(){
    return new Promise((resolve,reject)=>{
        console.log('chole');
        resolve(20);
    })
}

await

位于async函数内部，一般位于promise对象之前，会拿到该对象的结果，即resolve 和 reject的参数，如果不是promise对象则会用Promise.resolve包装后返回对应的值。会强制等待至拿到结果

async function chloe(){
    console.log('chloe');
    return 20;
}

async function taran(){
    //chole函数执行并返回一个Promise对象，await拿到其resolve参数20
    const age = await chloe();
    console.log("taran" + age);
}

taran(); // chloe taran20

Vuex

vuex是vue的状态管理模式，即将需要共享的data使用vuex进行统一集中式管理

vuex中有五种默认的基本对象：

  1. state 存储状态 使用$store.state.val = xx$
  2. getters 对数据获取之前的再次编译，state的计算属性，使用$store.getters.fun()
  3. mutations 修改状态，同步，使用$store.commit(" ",params)
  4. actions 异步操作, 使用$store.dispath(" ")
  5. modules store的子模块

使用方法

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
    count : 0
}

export default new Vuex.Store({
    state
})

computed 用来监控自己定义的变量，该变量不在data里面声明，可以在页面上进行双向数据绑定展示出结果或者用作其他处理。比较适合多个变量或者对象进行处理后返回一个结果值。比如购物清单用computed属性来计算

watch主要用来监控vue实例的变化，监控的变量必须在data里声明才可以。一般用于路由监控，input输入框的值特殊处理等一个数据影响多个数据的场景。

dispatch 含有异步操作，数据提交至action，可用于向后台提交数据 this.$store.dispatch(actions的方法,args)

commit 同步操作，数据提交至mutation 可用于读取用户信息写入缓存 this.$store.commit(mutations的方法,args) ，使用commit提交到mutation修改state时，vuex能够记录每一次state的变化记录，保存状态快照，实现时间漫游/回滚之类的操作。

若将vue创建store时开启严格模式(strict:true) 则对状态进行修改不经过mutation会报错 。

原生ajax

//创建异步对象
var xhr = new XMLHttpRequest();
//设置请求基本信息，并加上请求头
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
xhr.open('post','test.php')
//发送请求
xhr.send('name = lan&age = 18')
xhr.onreadystatechange = function(){
    //判断服务器是否正确响应
    if(xhr.readyState == 4 && xhr.status == 20){
        console.log(xhr.responseText);
    }
}

jqueryAjax

var loginBtn = document.getElementsByTagName("button")[0];
loginBtn.onclick = function(){
    ajax({
        type:"post";
        url:"test.php";
        data:"name=lan&pwd=123456";
        success:function(data){
        console.log(data);
    }
    })
}

fetch

fetch("http://....",{
    method:'post',
    header:{
        'Content-Type':'application/x-www-form-urlencoded'
    },
    body: new URLSearchParams([
        ["username","lan"],["password","123456"]
    ]).toString()
})

.then(res =>{
    console.log(res);
    return res.text();
})
.then(data =>{
    console.log(data)
})

axios

axios({
    method: 'post',
    url:'abc/login',
    data:{
        userName:"lan",
        password:'123'
    }
})
.then(function (response){
    console.log(response);
})
.catch(function(error){
    console.log(error);
})