axios

安装

npm install axios

特性

1.从浏览器中创建XMLHttpRequests
2.从node.js创建http请求
3.支持PromiseAPI
4.拦截请求和响应
5.转换请求数据和响应数据
6.取消请求
7.自动转换JSOn数据
8.客户端支持防御SXRF

使用

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);
  });

post

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .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 传递相关配置来创建请求

// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  //post类型使用data，get类型使用params
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

创建axios实例

axios.create([config])

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

import axios from "axios";
import qs from "qs";
const hxios = axios.create({
  baseURL:"/api",
  transformRequest:[
    function(data,headers) {
      console.log("----------------------");
      // qs是用来对数据进行序列化的
      return qs.stringify(data);
    },
  ],
  timeot:4000,
});
export default hxios;

二次封装axios

创建一个axios.js文件
在文件中二次封axios
将二次封装的axios放到vue原型上（或者直接在要使用的文件中引用）
例如：

const axios = require('axios');
const request = axios.create({
  // 自动让添加到请求路径上，被代理服务器拦截后，可以通过代理服务器将baseYURL去掉
  baseURL:"/api",
  // 设置请求超时时间，一般设置为3，4秒
  timeout:4000,
  // `params` 是即将与请求一起发送的 URL 参数
  // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
  // get请求时使用
  params: {
    ID: 12345
  },
  // post请求时使用的传输数据的对象
  // data: {
  //   firstName: 'Fred'
  // },
  // header是即将被发送的自定义请求头
  // headers:{'X-Requested-With': 'XMLHttpRequest'},
  // `method` 是创建请求时使用的方法
  // method: 'get', // default
  // `transformRequest` 允许在向服务器发送前，修改请求数据
  // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
  // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
  // transformRequest: [function (data, headers) {
  //   // 对 data 进行任意转换处理
  //   return data;
  // }],
  // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
  transformResponse: [function (data) {
    // 对 data 进行任意转换处理
    return data;
  }],
});
module.exports = request;

跨域问题的解决

方法一

在服务端设置白名单

方法二

设置一个本地代理服务器，用代理服务器请求接口服务器，在通过代理服务器将数据发送给浏览器（页面）

设置全局axios

在main.js中引入axios，并将axios放到vue的原型中，例如：
Vue.prototype.$axios=axios

例子：

过程：客户端发起请求，被代理服务器拦截，然后代理服务器将数据放松给目标服务器

main.js文件中添加以下代码,将axios放到vue的原型中

import axios from 'axios'
Vue.prototype.$axios = axios;

vue.config.js文件中写入以下代理服务器拦截请求的代码（vue.config.js文件没有就自己创建）】
在更目录下创建vue.config.js配置文件
关于打包的信息都可以使用vue.config.js配置

//过程：客户端发起请求，被代理服务器拦截，然后代理服务器将数据放松给目标服务器
module.exports ={
  // 用来设置本地开发服务的
  devServer: {
    //代理
    proxy: {
      //拦截一个请求
      // 如果请求接口有/api，就将这个请求代理到target的url这个地址中
      "/api" : {
        //这里的端口号要与接口的端口号对应
        target: "http://192.168.0.13:8081",
        //是否返回数据
        changeOrigin:true,
        //路径重写
        pathRewrite:{
          //通过正则
          //将以/api开头的路径中的/api替换成空字符串
          "^/api":"/api",
          //??
          "^/api":""
        }
      }
    }
  }

创建server.js文件，用以写接口代码（或不要这个文件，直接去请求接口）

const Koa  = require('koa');
const Router = require('koa-router');
const app = new Koa();
const router = new Router();
router.get("/api",(ctx) =>{
  ctx.body = '你φ(*￣0￣)';
})
app.use(router.routes()).use(router.allowedMethods());
app.listen(8081,()=>{
  console.log("server is running ")
})

调用axios请求接口

changeMsg:function() {
  //这里使用的是服务器的地址
      this.$axios.get('/api',{
        params:{
          Id:10
        }
      }).then(res => {
        console.log(res);
      }).catch(error => {
        console.log(error);
      })
    }

过程

1引入axios
2.发送请求
3.解决跨域，服务器代理
  1：新建vue.config.js（项目更目录）
  2：写代理配置
  module.exports ={
  // 用来设置本地开发服务的
  devServer: {
    proxy: {
      // 如果请求接口有/api，就将这个请求代理到target的<url>这个地址中
      "/api" : {
        // target 的地址就是本第服务地址就行，端口好与接口一致 
        target: "http://192.168.0.13:8080/",
        changeOrigin:true,
        //路径重写
        pathRewrite:{
          //通过正则
          //将以/api开头的路径中的/api替换成空字符串
          "^/api":""
        }
      }
    }
  }

拦截器

拦截器的用法和生命周期有点像

const axios = require('axios');
const req = axios.create({
  // 自动让添加到请求路径上，被代理服务器拦截后，可以通过代理服务器将baseYURL去掉
  baseURL:"/api",
  // 设置请求超时时间，一般设置为3，4秒
  timeout:4000,
  // `params` 是即将与请求一起发送的 URL 参数
  // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
  // get请求时使用
  params: {
    ID: 12345
  },
  // post请求时使用的传输数据的对象
  // data: {
  //   firstName: 'Fred'
  // },
  // header是即将被发送的自定义请求头
  // headers:{'X-Requested-With': 'XMLHttpRequest'},
  // `method` 是创建请求时使用的方法
  // method: 'get', // default
  // `transformRequest` 允许在向服务器发送前，修改请求数据
  // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
  // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
  // transformRequest: [function (data, headers) {
  //   // 对 data 进行任意转换处理
  //   return data;
  // }],
  // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
  transformResponse: [function (data) {
    // 对 data 进行任意转换处理
    return data;
  }],
});
// 请求拦截器
req.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    return config;
  },
  function (error) {
    // 对请求错误做些什么 包含了状态码
    return Promise.reject(error);
  }
);
// 响应拦截器
req.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    return response;
  },
  function (error) {
    // 对响应错误做点什么
    console.log(error, "-------------");
    return Promise.reject("你出错了！但是呢就不告诉哪里错了");
  }
);
module.exports = req;

数据格式(在浏览器中)

get请求提交的数据格式：query String
post请求提交的数据： Payload
form表单提交的数据：form data

常见状态码

401,403,404,500,501,502
400：Bad Request—客户端请求的语法错误，服务器无法理解
401:没有权限（例如：没有带校验信息）
403：forbidden—服务器理解请求客户端的请求，但是拒绝执行此请求
404;NOT Found—服务器无法根据客户端的请求找到资源（网页）。（与401类似）‘
500：Internal Server Error — 服务器内部错误，无法完成请求
501：Not Implemented—服务器不支持请求的功能，无法完成请求
502：Bad Gateway—作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应
503：Service Unavailable—由于超载或系统维护，服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中

vue 基础知识

vue8-练习axios相关内容