Axios接口调用学习

• 常用API

   get： 查询数据
   post：添加数据
   put：修改数据
   delete：删除数据
  

• get传参

			A.通过URL传参

            axios.get('/data?id=123')
                .then({
                    ret => console.log(ret.data)

                })

            axios.get('/data/123')
                .then({
                    ret => console.log(ret.data)
                })

            B.通过params传参

            axios.get('/data', {
                params: {
                    id: 123
                }
            })
            .then(ret => console.log(ret.data))

      

• 2.POST传参

       A.通过选项传递参数（默认传递的是json格式的数据）
         参数：{"username":"tom","password":123}
  
       axios.post('/data', {
           username: 'tom',
           password: 123
       })
       .then(ret => console.log(ret.data))
  
       B.通过URLSearchParams传递参数（application/x-www-form-urlencoded）  
         参数：username=tom&password=123
  
       const params = new URLSearchParams();
       params.append('username','tom');
       params.append('password','123');
       axios.get('/data', params)
       .then(ret => console.log(ret.data))
  
   -->尽量使用json格式进行传参。
  

 响应结果的主要属性：
            data：实际响应回来的数据
            headers：响应头信息
            status：状态码
            statusText：响应状态信息
        
        axios的全局配置：
            axios.defaults.timeout = 3000                             //超时时间
            axios.defaults.baseURL = 'http://localhost:8000/api'      //默认地址
            axios.defaults.headers[ 'mytoken' ] = 'dahkdhakdakjda'    //设置请求头

        //配置请求的基准url地址
        axios.defaults.baseURL = 'https://autumnfish.cn/api/'
        //配置请求头信息,对于跨域，请求头一般由后台配置。
        axios.defaultes.headers['mytoken'] = 'hello';
        axios.get('joke/list?num').then(
            res => {console.log(this.joke); this.joke = res.data.jokes;},
            err => {console.log(err)}

• Axios拦截器：在请求发出之前设置一些信息。

axios.interceptors.request.use(function(config) {
                config.headers.mytoken = 'nihao';              //设置请求头
                return config;
            }, function(err) {
                console.log(err)
            })

• 响应拦截器：在获取数据之前对数据做一些加工处理

             //添加一个响应拦截器
            axios.interceptors.resopnse.use(function(res) {
                //在这里对后台返回的数据进行处理
                return res;
            }, function(err) {
                //处理响应的错误信息
            })