axios 是基于promise对ajax的一种封装

  1. axios的基本使用

指定请求方式(有参数)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//第一种方式    直接地址后边拼接形式 
axios({
  url:"地址?id=1",
  methods:"Get",
}).then(res=>{
  console.log(res)

})

//第二种方式 params
axios({
  url:"地址",
  methods:"Get",
  params:{
    id:1, 
    age:10
  }
}).then(res=>{
  console.log(res)

})

  1. 使用post方式请求(有参数) 如果使用 data 后台控制器拿到null ，因为axios使用携带参数请求默认使用application/json, 后台解决方式，

    第一种使用params 则通过,

    “name=张三“

    服务器端接收数据的参数上加上@requestBody

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    axios({
      url:"",
      methods:"post",
      data:{
        name:"三"
      }

    }).then(res=>{
      consloe.log(res)
    })

    使用axios.get()方式,地址后边加{}

    1
    2
    3
    4
    5
    6
    7
    axios.get(
      '地址',{params:{id:1}}
    ).then(res=>{
      conosle.log(res)
    }).catch(err=>{
      console.log(err)
    })

    使用axios.post()方式,地址后边加

    name=”张三”&age=10(后台不处理的情况)

1
2
3
4
5
6
7
8
9
axios.post(
  "地址",
  name="张三"&age=10

).then(res=>{

}).catch(err=>{
  
})

使用axios.post()方式,地址后边{} (后台处理的情况)

1
2
3
4
5
6
7
8
9
axios.post(
  "地址",
 { name:"张三"}

).then(res=>{

}).catch(err=>{
  
})

axios 发送并发请求 all

1.第一种方式

1
2
3
4
5
6
7
8
9
10
axios.all(
  [
    axios.get("地址"),
    axios.get("地址"，{params:{id:1}})
  ]
).then(res=>{
  console.log(res[0])
  console.log(res[1])

}).catch(err=>{})
  1. 第二种方式 使用spread 函数
1
2
3
4
5
6
7
8
9
10
11
12
axios.all(
  [
    axios.get("地址"),
    axios.get("地址"，{params:{id:1}})
  ]
).then(


  axios.spread((res1,res2)=>{
    console.log(res1,res2)
  }
).catch(err=>{})

axios 全局配置

1
2
3
4
5
6
7
8
9
10
11

axios.default.baseURL ="http://locationhost:9999/student"  //配置全局属性
axios.default..timeout = 5000;
axios.get("url后边的地址").then(res=>{   //在全局配置基础上去请求
  console.log(res)
})
//post

axios.post("url后边的地址").then(res=>{
  console.log(res)
})

axios 实例

1
2
3
4
5
6
7
8
9
10
//创建axios的实例
let newVar = axios.create({
  baseURL ="http://locationhost:9999/student",
  timeout:5000
  
})
//使用
newvar({
  url:"",
}).then(res=>{})

axios 拦截器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// axios提供两大类 
//  一种请求方向，(成功，失败)
// 一种是响应方向,(成功，失败)拦截器主要用于我们在发起请求或者响应时对操作进行 响应的处理，发起请求时可添加网页加载动画，token认证时，判断用户有没有登陆， 强制登陆
//响应时进行相应的数据处理

axios.interceptor.request.use(config=>{
  //需要拦截的
  console.log('进入请求拦截器')
  return config;//抛出 一定放行请求
}，err=>{
  console.log('进入失败')
})
axios.get("地址").then(res=>{
  console.log(res)
  
})


//响应方向
axios.interceptor.response.use(config=>{
  //需要拦截的
  console.log('进入响应')
  return config.data
  ;//抛出
}，err=>{
  console.log('进入响应失败')
})
axios.get("地址").then(res=>{
  console.log(res)
  
})

axios在vue中模块的封装

1.第一种 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import axios from 'axios'
export function request (config,success,fail){
  axios({
    url:config,
  }).then(res=>{
    
  }).catch({
    
  })

}

//在main.js导入  调用者
import { request } from '路径'
request(config:'接口地址',success:res=>{

},fail:err=>{
  
})

2.第二种

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import axios from 'axios'
export function request (config){
  axios.default.baseURL ="http://locationhost:9999/student";
  axios(config.url).then(res=>{
    config.success(res)

  }).catch(err=>{
    config.fail(err)
  })

}


//调用
import { request } from '路径'
request(config:{
  url:'除公共地址外的后缀'，
  success:res=>{

  },
  fail:err=>{
    
  }
})

3.第三种

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
axios.default.baseURL ="http://locationhost:9999/student";
export default request(config){
  return new Promise((resolve,reject)=>{
    let newVar =axios.create({
      baseURL:"http://locationhost:9999/student",
      timeout:5000
    })
    newVar(config).then(res=>{
      resolve(res)
    }).catch(err=>{
      reject(err)
    })
  })
}


//调用

import { request } from '路径'
request({
    url:'除公共地址外的后缀',
}).then(res=>{
  console.log(res)

}).catch(err=>{
console.log(err)
})

4.第四种

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
export default request(config){
  let newVar = axios.create({
    baseURL:"http://locationhost:9999/student",
    timeout:5000
  })
  return newVar(config)
}

//调用
import { request } from '路径'
request({
    url:'除公共地址外的后缀',
}).then(res=>{
  console.log(res)

}).catch(err=>{
console.log(err)
})