Axios异步请求

Axios异步请求

特点:

• 拦截请求和响应
• 转换请求数据和响应数据
• 自动转化JSON数据

引入:

npm:

$ npm install axios

html引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

入门

get请求

路径带参传递数据

// /user:请求路径,ID参数名称,需要和后端接口的参数名称保持一致
axios.get('/user?ID=12345')
	//请求成功执行的方法,response:后端返回的结果数据
  .then(function (response) {
    console.log(response);
  })
	//请求出现异常执行的方法,异常来源包括前后盾
  .catch(function (error) {
    console.log(error);
  });

多参数传递

当后端接口参数为javaBean可以使用多参数,但是请求参数名称和后端javaBean中的属性名称需要一致,才能自动转换

axios.get('/user', {
    params: {
      ID: 12345,
      name:'陈木木'  
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));

axios Api

请求

axios({
  method: 'post',  		//方法类型
  url: '/user/12345',	//请求路径
  data: {				//请求参数
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

图片

// 获取远端图片
axios({
  method:'get',
  url:'http://bit.ly/2mTM3nY',
  responseType:'stream'
})
  .then(function(response) {
  response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});

默认方式

//如果什么都不写,默认的就是get请求方式
axios('/user/12345');

官方提供的请求方法简写

• axios.request(config)
• axios.get(url[, config])
• axios.delete(url[, config])
• axios.head(url[, config])
• axios.options(url[, config])
• axios.post(url[, data[, config]])
• axios.put(url[, data[, config]])
• axios.patch(url[, data[, config]])

响应结构

官方推荐的响应结构

{
  // `data` 由服务器提供的响应
  data: {},

  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // `headers` 服务器响应的头
  headers: {},

   // `config` 是为请求提供的配置信息
  config: {},
 // 'request'
  // `request` is the request that generated this response
  // It is the last ClientRequest instance in node.js (in redirects)
  // and an XMLHttpRequest instance the browser
  request: {}
}

调用then的时候,你接受到的响应

axios.get('/user/12345')
  .then(function(response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

拦截器

可以在请求或者响应被then方法或者catch方法处理之前拦截数据

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

移除拦截器

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

对异常的处理

也就是说对进入tatch方法中的数据进行业务处理

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
       //请求发出,服务器响应的状态码超出2**
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
        //发送了请求,但是没接受到响应
      console.log(error.request);
    } else {
        //请求方式,或者编写请求配置出错
      console.log('Error', error.message);
    }
    //答应请求配置
    console.log(error.config);
  });

仅为学习!

axios官方网站