接收到请求后处理数据

最新推荐文章于 2022-07-18 17:39:38 发布

苗苗大佬

最新推荐文章于 2022-07-18 17:39:38 发布

阅读量208

点赞数

文章标签： vue.js javascript node.js axios

本文链接：https://blog.csdn.net/weixin_39349045/article/details/120406168

版权

接收到请求后执行处理操作：

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

配置默认值：

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

添加拦截器

// 添加请求拦截器
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);

代码

<!DOCTYPE html>
<html>
  <head>
    <title>day16-demo1</title>
      <script src="../js/axios.min.js"></script>
  </head>
  <body>
    <div id="app">
        <input type="button" value="axios get5()" onclick="get5()"/>
        <input type="button" value="axios get6()" onclick="get6()"/>
      </div>
    <script>
    axios.defaults.baseURL = "http://127.0.0.1:5000/"
    axios.defaults.headers.common['token'] = "besttest";

    // 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    console.log("config",config)
    config.url = "/vue-element-admin/user/login"
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    const result = response.data
    if(result.code === 20000) {
          alert("请求成功")
        } else (
          alert("请求失败")
        )
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

    function get5(){
      const form = new FormData()
      form.append("key","value")
      form.append("name","xiaowang")
      form.append("age",18)
      axios({
        url: "/user/data",
        method: "post",
        data: form
      }).then(response => {
        console.log("response:",response)
        console.log("response.data:",response.data)
      })
    }
    function get6(){
      const form = new FormData()
      form.append("key","value")
      form.append("name","xiaowang")
      form.append("age",18)
      axios({
        url: "/user/data",
        method: "post",
        data: form
      }).then(response => {
        console.log("response:",response)
        console.log("response.data:",response.data)
      })
    }
    </script>
  </body>
</html>