vue前后端交互


前后端交互模式

传统形式URL

传输协议://服务器IP或域名:端口/资源所在位置标识?查询参数1&查询参数2#锚点

HTTP请求方式:GET POST PUT DELETE

promise用法

promise 是异步编程的一种解决方案,从语法角度讲,promise是一个对象,从它可以获取异步操作的消息。

使用promise的好处:

  • 避免多层异步调用嵌套问题
  • promise对象提供了简洁的API,使控制异步操作更加容易

基本用法:

  • 实例化promise对象,构造函数中传递函数,该函数用于处理异步任务。
  • resolve 和 reject 两个参数用于处理成功和失败两种情况,并且通过p.then获取处理结果
var p = new Promise(function(){
  // 成功时 resolve()
  // 失败时 reject()
}) ;
p.then(function(ret){
  // 从resolve得到正常结果
},function(ret){
  // 从reject得到错误信息
})

promise-ajax

发送多次ajax请求

querydata()
  .then(function(data){
  return queryData();
})
  .then(function(data){
  return queryData();
})
....

then 参数中函数返回值

  • 返回promise 实例对象,返回的该实例对象会调用在一个then
  • 返回普通值,返回的普通值会直接传递给写一个then,通过then函数中的参数接受该值

promise 常用的api

  • p.then() 得到异步任务的正确结果

  • p.catch() 获取异常信息(等价于then处理错误信息)

  • p.finnally() 成功与否都会执行(非正式标准)

  • p.all() 并发处理多个异步任务,所有任务都执行完才能得到结果

  • p.race() 并发处理多个异步任务,只要有一个任务完成就能得到结果

    promise.all([p1,p2,p3]).then((res) => {
      console.log(result);
    })
    promise.race([p1,p2,p3]).then((res) => {
      console.log(result);
    })

接口调用-fetch用法

更加简单的数据获取方式,功能更加强大、更灵活,可以看作是xhr的升级版

语法结构

fetch(url).then(fn2)
  .then(fn3)
  ...
  .catch(fn)

fetch 请求参数

常用配置选项:

  • method(String) HTTP请求方法,默认为GET POST PUT DELETE

    // get delete 请求方式
    fetch(`/abc/123`,{
      method:'get'
    }).then(data => {
      retrun data.text();
    }).then(ret => {
      // 注意 此处为最终得到的数据
      console.log(ret);
    })
    
    // post put 请求方式1
    fetch(`/abc/123`,{
      method: 'post',
      body: 'uname=tom&pwd=123',
      headers:{
        'content-type': 'application/x-www-form-urlencoded'
      }
    }).then(data => {
      retrun data.text();
    }).then(ret => {
      // 注意 此处为最终得到的数据
      console.log(ret);
    })
    
    // post put 请求方式2
    fetch(`/abc/123`,{
      method: 'post',
      body: JSON.stringify({
        uname:'tom',
        pwd:'123'
      }),
      headers:{
        'content-type': 'application/json'
      }
    }).then(data => {
      retrun data.text();
    }).then(ret => {
      // 注意 此处为最终得到的数据
      console.log(ret);
    })
  • Body(String) HTTP的请求参数

  • Headers(Object) HTTP的请求头,默认为{ }

fetch 响应结果

  • text() 将返回结果处理成字符串类型
  • Json() 将返回结果 JSON.parse(reponse TEXT)

接口调用-axios用法

Axios 是一个基于Promise 用于浏览器和node.js的HTTP客户端。

基本用法

axios.get('/data')
.then(ret => {
  // data 属性名称是固定的,用于获取后台相应数据
  console.log(ret.data);
})

axios 参数传递

GET DELETE

  • 通过URL传递参数 ‘/data?id=123’
  • 通过params选项传递参数 Params: { id:123}

POST 和 PUT 请求传递参数

  • 通过选项传递参数
  • 通过 URLSearchParams 传递参数
    # 1. 发送get 请求 
axios.get('http://localhost:3000/adata').then(function(ret){ 
      #  拿到 ret 是一个对象      所有的对象都存在 ret 的data 属性里面
      // 注意data属性是固定的用法,用于获取后台的实际数据
      console.log(ret)
    })
	# 2.  get 通过传统的url  以 ? 的形式传递参数
	axios.get('http://localhost:3000/axios?id=123').then(function(ret){
      console.log(ret.data)
    })
    # 2.2  restful 形式传递参数 
 axios.get('http://localhost:3000/axios/123').then(function(ret){
      console.log(ret.data)
    })
	# 2.3  通过params  形式传递参数 
    axios.get('http://localhost:3000/axios', {
      params: {
        id: 789
      }
    }).then(function(ret){
      console.log(ret.data)
    })

	# post 通过选项传递参数
    axios.post('http://localhost:3000/axios', {
      uname: 'lisi',
      pwd: 123
    }).then(function(ret){
      console.log(ret.data)
    })
	# post  通过 URLSearchParams  传递参数 
    var params = new URLSearchParams();
    params.append('uname', 'zhangsan');
    params.append('pwd', '111');
    axios.post('http://localhost:3000/axios', params).then(function(ret){
      console.log(ret.data)
    })

axios 全局配置

#  配置公共的baseURL 
axios.defaults.baseURL = 'https://api.example.com';
#  配置 超时时间
axios.defaults.timeout = 2500;
#  配置公共的请求头
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
# 配置公共的 post 的 Content-Type
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

axios 拦截器

  • 请求拦截器
    • 请求拦截器的作用是在请求发送前进行一些操作,例如在每个请求体里加上token,统一做了处理如果以后要改也非常容易
  • 响应拦截器
    • 响应拦截器的作用是在接收到响应后进行一些操作,例如在服务器返回登录状态失效,需要重新登录的时候,跳转到登录页

接口调用-async/await 用法

  • async作为一个关键字放到函数前面
    • 任何一个async函数都会隐式返回一个promise
  • await关键字只能在使用async定义的函数中使用
    • await后面可以直接跟一个 Promise实例对象
      
    •  await函数不能单独使用
      
  • async/await 让异步代码看起来、表现起来更像同步代码

综合案例


文章作者: linxueya
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 linxueya !
评论
  目录
喜迎
春节