axios请求数据

axios请求数据完整版：

1）引入axios文件

 <script src="./axios.min.js"></script>

2）引入文件后，会有axios的全局对象

// 请求数据: axios({config})

    <script>
      axios({
        // `url` 是用于请求的服务器地址
        url: "/caihongpi/index",
        // `method` 是创建请求时使用的方法,如果不写默认get
        method: "post",
        // `baseURL` 将自动加在 `url` 前面
        // 除非 `url` 是一个绝对 URL。
        baseURL: "http://api.tianapi.com",
        // `headers` 是即将被发送的自定义请求头
        headers: { "content-type": "application/x-www-form-urlencoded" },
        // `params` 是即将与请求一起发送的 URL 参数
        // 必须是一个对象或querystring
        // params: {
        //   key: "594dba7ea6752faac3e0fc02c3e0f9f4",
        // },
        // `data` 是作为请求主体被发送的数据
        data: "key=你的key",
        // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
        // 如果请求花费了超过 `timeout` 的时间，请求将被中断
        timeout: 1000,
        // `responseType` 表示服务器响应的数据类型，默认是json
        responseType: "json",
      })
        .then((res) => {
          console.log(res.data);
        })
        .catch((err) => {
          console.log(err);
        });
    </script>

创建axios实例请求数据：(实例instance用起来和axios基本一样)

1）使用create创建实例：

      let instance = axios.create({
        baseURL: "http://api.tianapi.com",
        method: "post",
        headers: {
          "content-type": "application/x-www-form-urlencoded",
        },
      });

2）通过实例发送请求：

      instance
        .post(
          "/robot/index",
          "key=594dba7ea6752faac3e0fc02c3e0f9f4&question=你是谁"
        )
        .then((res) => {
          console.log(res.data);
        });

请求响应拦截器 interceptors：（在发送请求之前或响应之后，做一些操作）

1）发送请求

      axios
        .get(
          "/cangtoushi/index?key=你的key&word=天行数据"
        )
        .then((res) => {
          console.log(res);
        });

2）请求拦截器：（一般可以在里面添加token，key等信息，那每次请求就不需单独添加了）

      axios.interceptors.request.use(
        function (config) {
          // 在发送请求之前做些什么
          // config就是你的请求的配置完整信息
          // 我在拦截器里面统一添加baseURL
          config.baseURL = "http://api.tianapi.com";
          return config;
        },
        function (error) {
          // 对请求错误做些什么
          return Promise.reject(error);
        }
      );

3）响应拦截器：（一般可以提前对数据进行格式化处理）

      axios.interceptors.response.use(
        function (res) {
          // 对响应报文做些事情
          return res.data;
        },
        function (error) {
          // 对请求错误做些什么
          return Promise.reject(error);
        }
      );