wordpress自定义菜单设置,成都外贸seo,电脑怎样重新安装wordpress,wordpress修改主页模板vueaxiospromise实际开发用法
vuex 核心 数据响应式原理
vuex 使用总结#xff08;详解#xff09;
vue的双向绑定原理及实现
一、axios的介绍 axios 是由 promise 封装的一个 http 的库。 promise是 es6 为解决异步编程的。
什么是异步#xff1f;
1. 不会按…vueaxiospromise实际开发用法
vuex 核心 数据响应式原理
vuex 使用总结详解
vue的双向绑定原理及实现
一、axios的介绍 axios 是由 promise 封装的一个 http 的库。 promise是 es6 为解决异步编程的。
什么是异步
1. 不会按照浏览器的加载方式 由上到下。
前端哪里面有异步
1. 回调函数
2. 定时器
3. 事件绑定
4. ajax
二、列举一个例子 针对这个例子 会出现 层层回调函数的嵌套 我们称为(回调地狱) 这样很不好 对我们后期的维护也很麻烦所以出现了 promise
axios它是基于promise的http库可运行在浏览器端和node.js中,然后作者尤雨溪也是果断放弃了对其官方库vue-resource的维护直接推荐axios库小编我也是从vue-resource转换过来的差别说不来我们讲一下axios在实际开发中的用法 axios特点 1.从浏览器中创建 XMLHttpRequests 2.从 node.js 创建 http 请求 3.支持 Promise API 4.拦截请求和响应 就是有interceptor 5.转换请求数据和响应数据 6.取消请求 7.自动转换 JSON 数据 8.客户端支持防御 XSRF
一、promise是如何产生的 promise并不是一个新的功能它是一个类它只是对 异步编程的代码进行整合它是解决异步(层层嵌套的这种关系)让你的代码看起来更简洁。 在 es6 中 promise是一个类(构造函数)使用它需要 new 实例。
注意
在 es5 里 类和构造函数是一个意思在es6中 类是类构造函数是构造函数 只要创建一个 promise 实例的时候都处于 pending (进行中)状态。 promise 构造函数接受一个函数作为参数该参数的两个参数分别是 resolve 和 rejected当你成功调用 resolve 当你失败调用 rejected。
promise 的使用方法
1. then 是成功的catch是失败的
2. 第一个函数是成功函数第二个是失败函数
3. 成功函数来自 resolve()
4. 失败函数来自于 reject()
5. p1 是在内存中存放着如果我想使用它就需要通过 点 操作符去使用
6. then 如果里面有两个函数第一个是成功第二个是失败如果有一个函数就是成功函数 安装axios和qs npm i axios --save npm i qs–save 创建项公共模块API 我是用vue-cli创建的项目在src-util-api.js(公共请求模块js)
引入axios和qs
import axios from ‘axios’ 有时候向后端发送数据后端无法接收,考虑使用qs模块
import qs from ‘qs’ 判定开发模式
if (process.env.NODE_ENV ‘development’) {
axios.defaults.baseURL /api;}else if (process.env.NODE_ENV ‘debug’) {
axios.defaults.baseURL http://v.juhe.cn;}else if (process.env.NODE_ENV ‘production’) {
axios.defaults.baseURL http://v.juhe.cn;} 全局设置头部信息
axios.defaults.headers.post[‘Content-Type’] ‘application/x-www-form-urlencoded;charsetUTF-8’; 全局设置超时时间
axios.defaults.timeout 10000; 请求路由拦截
在请求发出去之前可以做一些判断看是否是合法用户
axios.interceptors.request.use(function (config) { // 一般在这个位置判断token是否存在 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); }); 响应拦截
axios.interceptors.response.use(function (response){ // 处理响应数据 if (response.status 200) { return Promise.resolve(response); } else { return Promise.reject(response); } }, function (error){ // 处理响应失败 return Promise.reject(error); }); 封装请求方法 使用ES6模块化export导出import导入
在ES6前 前端就使用RequireJS或者seaJS实现模块化 requireJS是基于AMD规范的模块化库 而像seaJS是基于CMD规范的模块化库 两者都是为了为了推广前端模块化的工具现在ES6自带了模块化不过现代浏览器对模块(module)支持程度不同 需要使用babelJS 或者Traceur把ES6代码转化为兼容ES5版本的js代码;
get请求
export function get(url, params){ return new Promise((resolve, reject) { axios.get(url, { params: params }).then(res { resolve(res.data); }).catch(err { reject(err.data) }) }); } post请求
export function post(url, params) { return new Promise((resolve, reject) { axios.post(url, qs.stringify(params)) .then(res { resolve(res.data); }) .catch(err { reject(err.data) }) }); } 实际使用 在main.js中引入js
import {get,post} from ‘./utils/api’ //将方法挂载到Vue原型上 Vue.prototype.get get; Vue.prototype.post post; 配置请求环境 这里通过devServer请求代理 当在请求过程中有/api字符串会自动转换为目标服务器地址(target)
devServer: { historyApiFallback: true, hot: true, inline: true, stats: { colors: true }, proxy: { //匹配代理的url ‘/api’: { // 目标服务器地址 target: ‘http://v.juhe.cn’, //路径重写 pathRewrite: {‘^/api’ : ‘’}, changeOrigin: true, secure: false, } }, disableHostCheck:true } 这是请求聚合数据的接口为列子
this.get(‘/toutiao/index?typetopkey秘钥’,{}) .then((res){ if(res.error_code0){ resolve(res); }else{ //这里抛出的异常被下面的catch所捕获 reject(error); } }) .catch((err){ console.log(err) }) 返回数据
图片描述
使用promise 1.比如用户想请求url1接口完后再调url2接口
var promise new Promise((resolve,reject){let url1 /toutiao/index?typetopkey秘钥this.get(url,{}).then((res){resolve(res);}).catch((err){console.log(err)})
});
promise.then((res){let url2 /toutiao/index?typetopkey秘钥this.get(ur2,{}).then((res){//只有当url1请求到数据后才会调用url2否则等待resolve(res);}).catch((err){console.log(err)})
})Promise对象
Promise有三种状态 pending: 等待中或者进行中表示还没有得到结果 resolved: 已经完成表示得到了我们想要的结果可以继续往下执行 rejected: 也表示得到结果但是由于结果并非我们所愿因此拒绝执(用catch捕获异常) 这三种状态不受外界影响而且状态只能从pending改变为resolved或者rejected并且不可逆(顾名思义承诺的后的东西怎么又能返回呢)。在Promise对象的构造函数中将一个函数作为第一个参数。而这个函数就是用来处理Promise的状态变化
这里要注意不管是then或者catch返回的都是一个新的Promise实例而每个Primise实例都有最原始的Pending进行中到Resolve已完成或者Pending进行中到Reject已失败的过程
Promise基本用法
Promise.all()用法
var p Promise.all([p1, p2, p3]); all()接受数组作为参数。p1,p2,p3都是Promise的实例对象p要变成Resolved状态需要p1p2p3状态都是Resolved如果p1,p2,p3至少有一个状态是Rejectedp就会变成Rejected状态
Promise.race()用法
var p new Promise( [p1,p2,p3] ) 只要p1、p2、p3之中有一个实例率先改变状态p的状态就跟着改变。那个率先改变的 Promise 实例的返回值就传递给p的回调函数,p的状态就会改变Resolved状态
Promise resolve()用法
Promise.resolve(‘foo’) // 等价于 new Promise(resolve resolve(‘foo’)) 有时需要将现有对象转为Promise对象Promise.resolve方法就起到这个作用.
Promise reject()用法
Promise.reject(‘foo’) // 等价于 new Promise(reject reject(‘foo’)) Promise.reject(reason)方法也会返回一个新的 Promise 实例该实例的状态为rejected。但是Promise.reject()方法的参数会原封不动地作为reject的理由变成后续方法的参数。这一点与Promise.resolve方法不一致。
