VUE ajax数据装载与提交

谁借莪１个温暖的怀抱￠ 2022-04-22 15:12 168阅读 0赞

VUE可以集成很多Ajax类库与后台交互数据，本文使用VUE集成Axios Ajax类库

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。  
Features  
从浏览器中创建 XMLHttpRequests  
从 node.js 创建 http 请求  
支持 Promise API  
拦截请求和响应  
转换请求数据和响应数据  
取消请求  
自动转换 JSON 数据  
客户端支持防御 XSRF

## Promise ##

Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。  
通俗讲，Promise是一个承诺、承诺完成未来的一件事情，Promise存在三个状态。  
Pending 正在做。。。  
Resolved 完成这个承诺  
Rejected 这个承诺没有完成，失败

new Promise((resolve,reject)=>{
    	//执行异步操作
    }).then((resolveData)=>{
        //成功返回的数据
    	console.log(resolveData) 
    },(rejectErr)=>{
        //失败返回的错误信息
    }).then(data=>{
        //返回下一个Promise对象
    	return data
    }).then(data=>{
    	console.log(data)
    }

## 使用 cdn引入Axios ##

Axios Get请求

// 为给定 ID 的 user 创建请求
    axios.get('/user?ID=12345')
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    
    // 可选地，上面的请求可以这样做
    axios.get('/user', {
        params: {
          ID: 12345
        }
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });

Axios Post请求

axios.post('/user', {
        firstName: 'Fred',
        lastName: 'Flintstone'
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });

执行多个并发请求

## axios(config) ##

// 发送 POST 请求
    axios({
      method: 'post',
      url: '/user/12345',
      data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
      }
    });

## 并发 ##

axios.all(iterable)  
axios.spread(callback)

Axios相应数据格式

{
      // `data` 由服务器提供的响应
      data: {},
    
      // `status` 来自服务器响应的 HTTP 状态码
      status: 200,
    
      // `statusText` 来自服务器响应的 HTTP 状态信息
      statusText: 'OK',
    
      // `headers` 服务器响应的头
      headers: {},
    
      // `config` 是为请求提供的配置信息
      config: {}
    }